Question

我正在从http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

实现这个JQuery UI多选

我已经设法在我的asp.net页面中使用它，但是当我提交按钮时，所选文本仅显示最后检查的元素。那么如何维护所有已检查的项目after post back。任何人都可以帮助我吗？

这里我将数据填充到下拉列表中，主要功能是写在DAL上以从数据库中获取数据。

protected void ClearNPouplateListBox(DropDownList ctrl, DataTable dt)
    {
        try
        {
            ctrl.DataSource = dt;
            ctrl.DataTextField = "Name";
            ctrl.DataValueField = "Id";
            ctrl.DataBind();

        }
        catch (Exception ex)
        {
            Logger.Write("Exception in LogGeneralIncidentForm.ClearNPouplateListBox Method" + ex.Message);
        }
    }

这里我试图将所选项目保留在数据表

中

DataTable dtAssigners = new DataTable();
            dtAssigners.Columns.Add("GIMID", typeof(int));
            dtAssigners.Columns.Add("UserId", typeof(int));
            dtAssigners.Columns.Add("MODE", typeof(char));
            dtAssigners.Columns.Add("CreatedBy", typeof(int));
            DataTable dt = null;

            foreach (System.Web.UI.WebControls.ListItem list in ddlAssignedTo.Items)
            {

                if (list.Selected)
                {

                    DataRow drUsers = dtAssigners.NewRow();
                    drUsers["GIMID"] = GIMID;
                    drUsers["MODE"] = 'I';
                    drUsers["UserId"] = Convert.ToInt32(list.Value);
                    drUsers["CreatedBy"] = CurUsr.UserId;
                    dtAssigners.Rows.Add(drUsers);
                }
          }

我的java脚本是

<script type="text/javascript">
    $(function () {
        /*
        define global variable,
        and store message container element.
        */
        var warning = $(".message");

        $("#ctl00_MainContent_ddlAssignedTo").multiselect(
        {
            selectedList: 10,

            show: ["slide", 1000],

            hide: ["slide", 1000],

            header: "Choose only TEN items!",

            click: function (e) {

                if ($("#ctl00_MainContent_ddlAssignedTo").multiselect("widget").find("input:checked").length > 10) {
                    warning.addClass("error").removeClass("success").html("You can only check ten checkboxes!");
                    return false;
                }
                else {
                    warning.addClass("success").removeClass("error").html("Check a few boxes.");
              }    

            }

        }).multiselectfilter();

    });
</script>

Answer 1

如果使用列表框控件，请确保包含SelectionMode属性并将其设置为多个。我刚刚遇到这个问题，它为我纠正了它。下面我附上了我的确切代码段。

aspx页面：

<td><asp:ListBox ID="ddlRegion" runat="server" SelectionMode="Multiple" /></td>
<td><asp:ListBox ID="ddlZone" runat="server" SelectionMode="Multiple" /></td>
<td><asp:ListBox ID="ddlDistrict" runat="server" SelectionMode="Multiple" /></td>

jQuery的：

$('#<%=ddlRegion.ClientID%>').multiselect({
  noneSelectedText: "Select Region",
  header: false
});
$('#<%=ddlZone.ClientID%>').multiselect({
  noneSelectedText: "Select Zone",
  header: false
});
$('#<%=ddlDistrict.ClientID%>').multiselect({
  noneSelectedText: "Select District",
  header: false
});

我不需要服务器端代码来保留回发后的值

Answer 2

回发后你必须再次绑定下拉菜单并在下拉列表中为所选项目设置选定=“选定”属性

<select multiple="multiple">
  <option value="foo" selected="selected" >foo</option>
  <option value="bar" selected="selected" >bar</option>
  <option value="baz" selected="selected">baz</option>
</select>

jQuery UI MultiSelect小部件： - 在提交按钮后（回发后），仅检查最后选择的元素

2 个答案: