jQueryを使用してDropDownList内のオプションをフィルタリングする方法

Question

2 DropDownList.first DropDownListには4つのオプションがあります.2番目のDropDownListには20個のオプションがあります。value = 1のオプションが最初のDropDownListで選択されたとき2番目のDropDownList最初のDropDownListでvalue = 2が選択されています.2番目のDropDownListオプションのいくつかを示しています。あなたはこのjsFiddleを試すことができます

<div> 
    <asp:DropDownList ID="DropDownList1" runat="server" Height="72px" Width="184px"> 
     <asp:ListItem Value="1">All</asp:ListItem> 
     <asp:ListItem Value="2">Apples</asp:ListItem> 
     <asp:ListItem Value="2">Orange</asp:ListItem> 
     <asp:ListItem Value="3">Onion</asp:ListItem> 
    </asp:DropDownList> 
    <br /> 
    <asp:DropDownList ID="DropDownList2" runat="server" Height="18px" Width="187px"> 
     <asp:ListItem Value="Apple_Style_1">Apple Style 1</asp:ListItem> 
     <asp:ListItem Value="Apple_Style_2">Apple Style 2</asp:ListItem> 
     <asp:ListItem Value="Apple_Style_3">Apple Style 3</asp:ListItem> 
     <asp:ListItem Value="Orange_Style_1">Orange Style 1</asp:ListItem> 
     <asp:ListItem Value="Orange_Style_2">Orange Style 2</asp:ListItem> 
     <asp:ListItem Value="Orange_Style_3">Orange Style 3</asp:ListItem> 
     <asp:ListItem Value="Orange_Style_4">Orange Style 4</asp:ListItem> 
     <asp:ListItem Value="Onion_Style_1">Onion Style 1</asp:ListItem> 
     <asp:ListItem Value="Onion_Style_2">Onion Style 2</asp:ListItem> 
    </asp:DropDownList> 
</div> 

Answer 1

：http://jsfiddle.net/Chran/1/

HTML

<div> 
<select ID="DropDownList1" Height="72px" Width="184px"> 
    <option Value="1">All</option> 
    <option Value="2">Apples</option> 
    <option Value="2">Orange</option> 
    <option Value="3">Onion</option> 
</select> 
<br /> 
<select ID="DropDownList2" Height="18px" Width="187px"> 
    <option Value="Apple_Style_1">Apple Style 1</option> 
    <option Value="Apple_Style_2">Apple Style 2</option> 
    <option Value="Apple_Style_3">Apple Style 3</option> 
    <option Value="Orange_Style_1">Orange Style 1</option> 
    <option Value="Orange_Style_2">Orange Style 2</option> 
    <option Value="Orange_Style_3">Orange Style 3</option> 
    <option Value="Orange_Style_4">Orange Style 4</option> 
    <option Value="Onion_Style_1">Onion Style 1</option> 
    <option Value="Onion_Style_2">Onion Style 2</option> 
</select> 
</div>​ 

JavaScriptの私はjQuery

編集1）

コードがあるを使用してこれを行うことができますどのように

var options = $("#DropDownList2").html(); 
$("#DropDownList1").change(function(e) { 
    var text = $("#DropDownList1 :selected").text(); 
    $("#DropDownList2").html(options); 
    if(text == "All") return; 
    $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove(); 
});​ 

ASP.NetコントロールIDに従ってIDを変更する必要があります。

希望すると、これが役立ちます。