如何使用jQuery过滤DropDownList中的选项 [英] How to filter options in a DropDownList using jQuery

问题描述

我有2个DropDownList.first DropDownList有4个选项.Second DropDownList有20个选项。我想在第一个DropDownList中选择 value = 1 的选项时我显示所有元素在第二个DropDownList中。如果在第一个DropDownList中选择了 value = 2 的选项，我会显示一些第二个DropDownList选项，依此类推。如何使用 jQuery

I have 2 DropDownList.first DropDownList has 4 options.Second DropDownList has 20 options.I want when an option with value = 1 selected in first DropDownList I show All Element in second DropDownList.and if an option with value = 2 selected in first DropDownList I show some of second DropDownList options and So on. How I can do this using jQuery

编辑1）

代码是：

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

推荐答案

你可以尝试这个jsFiddle： http://jsfiddle.net/Chran/1/

You can try this 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

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

你将根据ASP.Net控制ID，我必须更改ID。

You will have to change the Id, according to the ASP.Net Control Id.

希望这可以帮到你。

这篇关于如何使用jQuery过滤DropDownList中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！