Question

我按了这个tutorial来搜索下拉列表。它工作正常。

但是，当我在同一页面中添加另一个下拉列表并对其使用相同的策略时，只有其中一个可以正常工作。

为两个下拉列表添加两个搜索的正确方法是什么？

这是javascript代码：

 <script type="text/javascript">
     var ddlText, ddlValue, ddl, lblMesg, ddlText1, ddlValue1, ddl1, lblMesg1;
     function CacheItems() {
         ddlText = new Array();
         ddlValue = new Array();
         ddl = document.getElementById("<%=ddlActivities.ClientID %>");
        lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
        for (var i = 0; i < ddl.options.length; i++) {
            ddlText[ddlText.length] = ddl.options[i].text;
            ddlValue[ddlValue.length] = ddl.options[i].value;
        }

        ddlText1 = new Array();
        ddlValue1 = new Array();
        ddl1 = document.getElementById("<%=ddlParicipent.ClientID %>");
        lblMesg1 = document.getElementById("<%=lblMessageParticipant.ClientID%>");
         for (var i = 0; i < ddl1.options.length; i++) {
             ddlText1[ddlText1.length] = ddl1.options[i].text;
             ddlValue1[ddlValue1.length] = ddl1.options[i].value;
         }
    }
    window.onload = CacheItems;

    function Filter(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);
    }

    function FilterParticipant(value) {
        ddl1.options.length = 0;
        for (var i = 0; i < ddlText1.length; i++) {
            if (ddlText1[i].toLowerCase().indexOf(value) != -1) {
                AddItem1(ddlText1[i], ddlValue1[i]);
            }
        }
        lblMesg1.innerHTML = ddl1.options.length + " items found.";
        if (ddl1.options.length == 0) {
            AddItem1("No items found.", "");
        }
    }

    function AddItem1(text, value) {
        var opt1 = document.createElement("option");
        opt1.text = text;
        opt1.value = value;
        ddl1.options.add(opt1);
    }
</script>

和HTML脚本：

<div class="editor-field">
            <asp:TextBox ID="txtSearch" runat="server"
                onkeyup="Filter(this.value)"></asp:TextBox><br />
            <asp:DropDownList ID="ddlActivities" runat="server" AutoPostBack="True" DataSourceID="SqlActivities" DataTextField="Name" DataValueField="ID" OnDataBound="ddlActivities_DataBound"></asp:DropDownList>
            <br />
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        </div><div class="editor-field">
                <asp:TextBox ID="TextBox1" runat="server"
                    onkeyup="FilterParticipant(this.value)"></asp:TextBox><br />
                <asp:DropDownList ID="ddlParicipent" runat="server" AutoPostBack="True" DataSourceID="sqlParticipent" DataTextField="Name" DataValueField="ID" OnDataBound="ddlParicipent_DataBound">
                </asp:DropDownList>
                <br />
                <asp:Label ID="lblMessageParticipant" runat="server" Text=""></asp:Label>
            </div>

由于

Answer 1

正如我们在评论中所讨论的那样，您的问题可能会发生，因为当您的第一个面板被隐藏时，您的javascript中的第一个document.getElementById调用将返回null。

如果您尝试对结果执行某些操作，则会收到错误 - 并且永远不会设置第二个下拉搜索。

有几种方法可以解决这个问题，使其更加健壮（并使其可以在其他页面上使用，而不必为每个下拉列表重复代码）但最简单的可能就是：

    ddlText = new Array();
    ddlValue = new Array(); 
    ddl = document.getElementById("<%=ddlActivities.ClientID %>");
    lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
    if(ddl != null && lblMesg != null)  // <-- new code
    {
        for (var i = 0; i < ddl.options.length; i++) {
           ddlText[ddlText.length] = ddl.options[i].text;
           ddlValue[ddlValue.length] = ddl.options[i].value;
        }
    } 
    ddlText1 = new Array();
    ddlValue1 = new Array();
    ddl1 = document.getElementById("<%=ddlParicipent.ClientID %>");
    lblMesg1 = document.getElementById("<%=lblMessageParticipant.ClientID%>");
    if(ddl1 != null && lblMesg1 != null) // <-- new code
    {
         for (var i = 0; i < ddl1.options.length; i++) {
             ddlText1[ddlText1.length] = ddl1.options[i].text;
             ddlValue1[ddlValue1.length] = ddl1.options[i].value;
         }
    }

asp.net添加搜索多个下拉列表

1 个答案: