为什么不下拉触发索引更改事件？答案

【问题标题】：Why doesn't a drop down fire index changed event?为什么不下拉触发索引更改事件？
【发布时间】：2017-06-19 09:04:21
【问题描述】：

我在文本框上使用了 Javascript 来搜索我的 asp.net 下拉列表中的项目。它可以工作，但问题是当一个项目被发现并显示在下拉列表中时，单击它后不会触发 SelectedIndexchange。为什么？

当我在许多项目中选择一个项目时它会触发，但当单个项目出现并单击时它不会触发。

代码：

 <script type="text/javascript">
        var ddlText, ddlValue, ddl, lblMesg;
        function CacheItems() {
            ddlText = new Array();
            ddlValue = new Array();
            ddl = document.getElementById("<%=ddlEmployers.ClientID %>");
            //lblMesg = document.getElementById("<%=lblMsg.ClientID%>");
            for (var i = 0; i < ddl.options.length; i++) {
                ddlText[ddlText.length] = ddl.options[i].text;
                ddlValue[ddlValue.length] = ddl.options[i].value;
            }
        }
        window.onload = CacheItems;

        function FilterItems(value) {
            ddl.options.length = 0;
            for (var i = 0; i < ddlText.length; i++) {
                if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                    AddItem(ddlText[i], ddlValue[i]);
                }
            }
            lblMesg.innerHTML = ddl.options.length + " items found.";
            if (ddl.options.length == 0) {
                AddItem("No items found.", "");
            }
        }

        function AddItem(text, value) {
            var opt = document.createElement("option");
            opt.text = text;
            opt.value = value;
            ddl.options.add(opt);
        }
    </script>

控件：

  <div class="col-md-6">
                                <div class="form-group">
                                    <%--<label for="exampleInputEmail1">Employers</label>--%>
                                    <asp:TextBox ID="txtSearch" CssClass="col-md-12" runat="server" placeholder="Search employer"
                                        onkeyup="FilterItems(this.value)"></asp:TextBox><br />
                                    <asp:DropDownList ID="ddlEmployers" AutoPostBack="true" OnSelectedIndexChanged="ddlEmployers_SelectedIndexChanged" runat="server" CssClass="form-control"></asp:DropDownList>
                                    <br />
                                    <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
                                </div>
                            </div>

SelectedIndexChanged 代码：

protected void ddlEmployers_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            ClsEmployee ClsEmployee = new MemberShip.Repository.ClsEmployee();

            if(ddlEmployers.SelectedValue.ToInt32() <= 0)
            {
                ddlBranches.SelectedValue = "0";
            }
            else
            {
                ddlBranches.SelectedValue =  ClsEmployeer.GetBranchByEmployerID(ddlEmployers.SelectedValue.ToInt32()) > 0 ? ClsEmployeer.GetBranchByEmployerID(ddlEmployers.SelectedValue.ToInt32()).ToString() : "0";

            }

        }
        catch (Exception ex)
        {

            ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "alert(" + ex.Message + ");", true);
        }
    }

【问题讨论】：

标签： javascript c# asp.net c#-4.0 webforms

【解决方案1】：

过滤后已设置单个选项时，索引不会发生变化。当你点击它时，它不满足OnSelectedIndexChanged的优点。

你可以编辑你的代码如下来验证我上面的陈述，

        function AddItem(text, value) {
            var opt = document.createElement("option");
            opt.text = text;
            opt.value = value;
            ddl.options.add(opt);
            ddl.value = "";
        }

但是这样做会清除过滤的下拉列表。

或者您可以在 FilterItems 函数中使用如下默认选项，

function FilterItems(value) {
            ddl.options.length = 0;
            AddItem("--Please Select--", -1);
            for (var i = 0; i < ddlText.length; i++) {
                if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                    AddItem(ddlText[i], ddlValue[i]);
                }
            }
            lblMesg.innerHTML = ddl.options.length + " items found.";
            if (ddl.options.length == 0) {
                AddItem("No items found.", "");
            }
        }

希望这会有所帮助！

【讨论】：