2

在我的 asp.net 项目中，我使用修改后的 Listbox 控件来显示一个多选下拉框，我使用 Select2() 直观地呈现它；

我设置 AutoPostBack="True" 以便在每次操作后我都可以更改代码中的对象。但是，因为 Select2 multple 不会更改<select>选项本身，所以 ViewState 不会将该项目识别为已选中。

我怀疑如果使用 Select2() 选择一个项目会改变 中的对应项<option>，<select>ViewState 会在重新加载页面时获取更改并将其标记为选中。

页面：

<cc1:MultiSelector ID="txtUsers" runat="server" CssClass="select" multiple="multiple"  OnSelectedIndexChanged="txtUsers_SelectedIndexChanged"></cc1:MultiSelector>

多选器控制：

public class MultiSelector : ListBox
{
    public IEnumerable SelectedItems
    {
        get
        {
            ListItemCollection items = this.Items as ListItemCollection;
            return this.Items.OfType().Where(item => item.Selected);
        }
    }
}

代码背后：

protected void txtUsers_SelectedIndexChanged(object sender, EventArgs e)
{
  // Do something with the selected items

}

请告知我如何将相应的 HTML 元素设置为选中状态。

<option value='3' selected="selected">Item3</option>

此外，删除现有项目也不起作用。很可能出于相同的原因，选择的属性永远不会被删除。

4

1 回答 1

3

我认为您在代码中犯了一个小“错误”。下面的工作示例 Aspx 页面（注意您未设置的 SelectionMode）：

<cc1:MultiSelector ID="txtUsers" AutoPostBack="true" SelectionMode="Multiple" runat="server" CssClass="select" OnSelectedIndexChanged="txtUsers_SelectedIndexChanged"></cc1:MultiSelector>

后面的代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                for (var i = 0; i < 10; i++)
                {
                    txtUsers.Items.Add(new ListItem { Value = i.ToString(), Text = "option1 " + i.ToString() });
                }
            }

        }

        public void txtUsers_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            foreach (ListItem item in txtUsers.Items)
            {
                if(item.Selected)
                    Debug.WriteLine(item);

            }
            Debug.Write(e);
        }

顺便说一句：您可以编写以下 JavaScript 以确保选择了正确的选项。

 $(function () {
        $('select').change(function (evt) { 
            if (evt.added) {
                $(evt.target).find("option[value=" + evt.added.id + "]").attr("selected", "selected");
            }
            if (evt.removed) {
                $(evt.target).find("option[value=" + evt.removed.id + "]").removeAttr("selected");
            }
        });
    });
于 2013-04-06T20:51:51.273 回答