如何使用jQuery篩選DropDownList中的選項

Question

我有2 DropDownList.first DropDownList有4個選項。第二個DropDownList有20個選項。我想在第一個DropDownList中選擇value = 1的選項時我顯示第二個DropDownList.and中的所有元素if在第一個DropDownList中選擇value = 2的選項我顯示了一些第二個DropDownList選項，依此類推。

<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

你可以試試這個的jsfiddle：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 Control Id，您將不得不更改Id。

希望這可以幫助你。