asp.net複数のドロップダウンリストの検索を追加

Question

ドロップダウンリストで検索するには、このtutorialに従ってください。それはうまく動作します。

しかし、同じページに別のドロップダウンリストを追加して同じ戦略を使用すると、そのうちの1つだけがうまく動作します。

2つのドロップダウンリストに2つの検索を追加する正しい方法は何ですか？

ここでは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

、あなたの問題は、おそらくあなたの最初のパネルがあるときにために発生しているが、隠された、最初のdocument.getElementByIdあなたのJavaScriptの呼び出しはnullを返します。

結果で何かを実行しようとすると、エラーが発生し、2番目のドロップダウン検索は決して設定されません。

これにアプローチしてより堅牢なものにする方法がいくつかありますが、最も簡単なのはおそらくこれでしょう：

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