Question

在我的asp.net项目中，我使用一个修改过的Listbox控件来显示一个多选的下拉框，我使用Select2（）直观地呈现;

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

我怀疑如果选择带有Select2（）的项目会改变<option>中的相应<select>，ViewState会在重新加载页面时选择更改并将其标记为已选中。

Aspx页面：

<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>

此外，删除现有项目不起作用。最有可能的原因与选择的属性永远不会被删除。

Answer 1

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

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

代码背后：

        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);
        }

BTW：您可以编写以下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");
            }
        });
    });

JQuery Select2不会将html选项更改为已选中

1 个答案: