為什么下拉式火力指數未更改事件？

Question

我在文本框上使用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);
        }
    }

Answer 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.", "");
            }
        }

希望這可以幫助！