javascript 如何使用 jQuery 过滤 DropDownList 中的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9275026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter options in a DropDownList using jQuery
提问by Arian
I have 2 DropDownList.first DropDownList has 4 options.Second DropDownList has 20 options.I want when an option with value = 1selected in first DropDownList I show All Element in second DropDownList.and if an option with value = 2selected in first DropDownList I show some of second DropDownList options and So on. How I can do this using jQuery
我有 2 个 DropDownList.first DropDownList 有 4 个选项。第二个 DropDownList 有 20 个选项。我想要value = 1在第一个 DropDownList 中选择一个选项时，我在第二个 DropDownList 中显示所有元素。如果value = 2在第一个 DropDownList 中选择了一个选项，我会显示一些第二个 DropDownList选项等等。我如何使用jQuery
Edit 1)
编辑 1)
Code is :
代码是：
<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>
回答by Amar Palsapure
You can try this jsFiddle: http://jsfiddle.net/Chran/1/
你可以试试这个 jsFiddle：http: //jsfiddle.net/Chran/1/
HTML
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
JavaScript
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();
});?
You will have to change the Id, according to the ASP.Net Control Id.
您必须根据 ASP.Net Control Id 更改 Id。
Hope this helps you.
希望这对你有帮助。
