How To Filter Options In A Dropdownlist Using 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

Solution 1:

You can try this jsFiddle: http://jsfiddle.net/Chran/1/

HTML

<div><selectID="DropDownList1"Height="72px"Width="184px"><optionValue="1">All</option><optionValue="2">Apples</option><optionValue="2">Orange</option><optionValue="3">Onion</option></select><br /><selectID="DropDownList2"Height="18px"Width="187px"><optionValue="Apple_Style_1">Apple Style 1</option><optionValue="Apple_Style_2">Apple Style 2</option><optionValue="Apple_Style_3">Apple Style 3</option><optionValue="Orange_Style_1">Orange Style 1</option><optionValue="Orange_Style_2">Orange Style 2</option><optionValue="Orange_Style_3">Orange Style 3</option><optionValue="Orange_Style_4">Orange Style 4</option><optionValue="Onion_Style_1">Onion Style 1</option><optionValue="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();
});​

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

Hope this helps you.