Question

131

How to filter options in a DropDownList using jQuery

rated 0 times [ 136] [ 5] / answers: 1 / hits: 22262 / 13 Years ago, tue, february 14, 2012, 12:00:00

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 13 Years ago mustafaericho · Accepted Answer

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

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.