如何使用jQuery过滤DropDownList中的选项

时间:2012-02-14 10:08:05

标签: javascript jquery asp.net

我有2个DropDownList.first DropDownList有4个选项。第二个DropDownList有20个选项。我希望在第一个DropDownList中选择value = 1的选项时我在第二个DropDownList中显示所有元素。如果选项有{{在第一个DropDownList中选择1}}我显示了一些第二个DropDownList选项,依此类推。我如何使用value = 2

执行此操作

修改1)

代码是:

jQuery

1 个答案:

答案 0 :(得分:6)

你可以尝试这个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

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。

希望这会对你有所帮助。