如何在代码隐藏中获取 jQuery 多选 UI 的选定值？答案

【问题标题】：How to get the selected values of jQuery multi select UI in codebehind?如何在代码隐藏中获取 jQuery 多选 UI 的选定值？
【发布时间】：2012-08-31 12:35:01
【问题描述】：

我有 jQuery UI 多选。我需要在代码隐藏中单击按钮时选择的值。

.aspx 页面：

 <select id="countries" runat="server" class="multiselect" name="countries[]">
    </select>

    <asp:Button id="Submit" runat="server" OnClick="btn_OnClick"></asp:Button>

.cs 页面：

protected void Page_Load(object sender, EventArgs e) {
   countries.Attributes.Add("multiple", "multiple");
   for(int i=0; i<10; i++) {
      countries.Items.Add(i.ToString());
    }
 }

protected void btn_OnClick(object sender, EventArgs e) {   }

【问题讨论】：

这里的语言是什么，国家不是 runat="server" 您如何访问它，请先更正您的代码
另外，在使 runat 服务器检查视图源之后，它是如何呈现的
@AshirvadSingh ：它的渲染很好。但我无法获取所选项目
@rahul：对不起。现在已更正。

标签： c# jquery .net jquery-ui

【解决方案1】：

您需要将您的选择元素更改为此（选项只是示例）：

<select runat="server" id="countries" multiple="true" class="multiselect">
    <option label="1" value="1" />
    <option label="2" value="2" />
    <option label="3" value="3" />
    <option label="4" value="4" />
    <option label="5" value="5" />
</select>

您省略了 runat="server"，并且 multiple 属性必须为 true 而不是“multiple”。 ASP.NET 将为您处理 name 属性。

在后面的代码中，您将需要遍历所有 select 的项目并检查它们的 selected 属性，如下所示：

protected void btn_OnClick(object sender, EventArgs e)
{
    for (int i = 0; i < countries.Items.Count; i++)
    {
        if (countries.Items[i].Selected)
        {
            // do something
            // countries.Items[i].Value;
        }
    }
}

【讨论】：

表示没有选中任何项目
我想自从它得到回发后我无法获得值。
@SanthoshKumar：我在选择元素中使用了测试选项，现在我已添加到答案中。尝试使用这些值进行测试，看看它在您选择多个选项时是否有效。我不确定您为多选使用的是什么 jQuery 插件，但它不应该改变在幕后选择和提交选项的方式。
我在运行时绑定了下拉列表中的值。
@SanthoshKumar：根据您在列表中绑定选项的方式，它可能会影响回发中选择的值。如果没有看到如何绑定的代码，很难说。但是，您可以通过另一种方式访问已发布的值。您可以直接调用 Request.Form[countries.UniqueID] 以获取从列表中选择的值的逗号分隔字符串，但这并不理想。

【解决方案2】：

.aspx 页面：

<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/page.js"></script>
    <link type="text/css" rel="stylesheet" href="css/themes/smoothness/jquery-ui-1.7.1.custom.css" />
    <link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <link href="js/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
    <script type="text/javascript" src="js/plugins/tmpl/jquery.tmpl.1.1.1.js"></script>
    <script type="text/javascript" src="js/plugins/blockUI/jquery.blockUI.js"></script>
    <script type="text/javascript" src="js/ui.multiselect.js"></script>

    <script type="text/javascript">
        $(function () {
            // remote
            $("#languages").multiselect({

            });

        });
    </script>




     <form target="submitFrame" runat="server">
<div>
       <dl>
           <dd>
          <select id="languages" class="multiselect" runat="server" name="languages[]">
           </select>
          </dd>
       </dl>
</div>
<div class="optionWrapper">
  <div class="optionInput">
    <input id="ec_checkValues" type="button" class="button" value="Assign Employees" />
     Selected Employees:
       <input id="hdn" type="text" />
   </div>

.cs 页面：

 protected void Page_Load(object sender, EventArgs e)
    {
        languages.Attributes.Add("multiple", "multiple");
        DataTable dt = obj.GetDataStoreInTable("Select top 10 intslno, nvrempname from tblHRIMS_employeedetail");
        languages.DataSource = dt;
        languages.DataTextField = "nvrempname";
        languages.DataValueField = "intslno";
        languages.DataBind();
    }

【讨论】：

此代码可以在文本框中获取您选择的值，然后从页面后面的代码中访问。这工作 100% 没问题...