CODEWITHSUNDEEP
jqueryhtml-select
Sai Avinash
Sai Avinash

Reputation: 4753

How to Clear multiple dropdowns at a time using Jquery

In my application, i have 5 dropdown lists.

When one dropdown is selected, i need to reset all the other four dropdowns.

I am assigning the class clear to all dropdown lists.

I am trying to do like this:

    $("#ddl1").change(function()
    {
      $(this).removeClass("clear");
      $(.clear).each(function()
{
    $(this).val('');
});
    });

But, the above snippet is working. I mean its not clearing other dropdown's

Please suggest..

Upvotes: 0

Views: 1148

Answers (4)

MonkeyZeus
MonkeyZeus

Reputation: 20737

The most proper way to do this would be to change the selected property of the <option> tags:

$('#ddl1').on('change', function()
{
    // un-select the selected dropdown item
    $('.clear option:selected').prop('selected', false);

    // select only first dropdown item
    $('.clear option').eq(0).prop('selected', true);
});

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 15112

JSFIDDLE DEMO

You don't need to clear the class clear, use not(this) to exclude the selected dropdown box.

$("#ddl1").change(function () {
    $('.clear').not(this).val('');
});

Upvotes: 1

kmoe
kmoe

Reputation: 2083

You've missed out some quotes in your class selector. Should be:

   $(".clear").each(function() ...

Upvotes: 1

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

the class selector should have quotes $('.clear') and btw you don't need a clear class also

$('select').change(function(){
    $('select').not(this).each(function(){
        $(this).val('');
    });
});

Upvotes: 2

Related Questions