How can I reset multiple select boxes in a form with jquery?

• there are multiple select boxes
• they are dynamically generated & we don't know what they will be
• some of the boxes option tags will be marked as selected
• fiddle: /

I have this so far, it resets everything but the selects.

$('button#reset').click(function(){
    $form = $('button#reset').closest('form');
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    $form.find('select').selectedIndex = 0;
  });

Added some markup:

<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">


    <div class="form-group">
        <label for="grade">Grade</label>
        <select name="grade" class="form-control input-sm" onchange="this.form.submit();">
            <option value="">Any</option>
            <option value="opt1">opt1</option>
            <option value="opt2" selected="selected">opt2</option>

        </select>
    </div>


    <!-- there are 6 more select controls -->


    <div class="form-group">
        <label>&nbsp;</label>
        <button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
    </div>

    <div class="form-group">
        <label>&nbsp;</label>
        <button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
    </div>

</form>

How can I reset multiple select boxes in a form with jquery?

• there are multiple select boxes
• they are dynamically generated & we don't know what they will be
• some of the boxes option tags will be marked as selected
• fiddle: http://jsfiddle.net/Qnq82/

I have this so far, it resets everything but the selects.

$('button#reset').click(function(){
    $form = $('button#reset').closest('form');
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    $form.find('select').selectedIndex = 0;
  });

Added some markup:

<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">


    <div class="form-group">
        <label for="grade">Grade</label>
        <select name="grade" class="form-control input-sm" onchange="this.form.submit();">
            <option value="">Any</option>
            <option value="opt1">opt1</option>
            <option value="opt2" selected="selected">opt2</option>

        </select>
    </div>


    <!-- there are 6 more select controls -->


    <div class="form-group">
        <label>&nbsp;</label>
        <button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
    </div>

    <div class="form-group">
        <label>&nbsp;</label>
        <button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
    </div>

</form>

• javascript
• jquery

• While setting the selectedIndex to 0 will work in most cases, it does not really reset the select element. It simply selects the first option. Similarly for your other form elements. If you want to go this way though, use .prop: $form.find('select').prop('selectedIndex', 0); . You are mixing the DOM API with the jQuery API. – Felix Kling Commented Jul 16, 2014 at 2:39
• 1 can you show us markup, it works when I tried ? – Mritunjay Commented Jul 16, 2014 at 2:44
• "some of the boxes option tags will be marked as selected" and do you want to reset to those values or do you always want to select the first option? FWIW, the markup is pretty irrelevant in this case. But you seem to listen to everybody else but me :) – Felix Kling Commented Jul 16, 2014 at 2:47
• 1 Oh, I just saw that you even have a button called "Reset". You might want to change that as well, because the default reset button <input type="Reset" /> resets the values as I described it (changes the values back to the ones defined in the HTML). – Felix Kling Commented Jul 16, 2014 at 2:58
• 1 Because of <button type="reset" ..>. Just as I explained in my previous comment. If you put an alert at end of the event handler, you can see how it first selects the first option and then resets the values to the default ones: jsfiddle.net/Qnq82/8 . See developer.mozilla.org/en-US/docs/Web/HTML/Element/… for more infos about the button type. (turns out the HTML wasn't irrelevant after all ;) ) – Felix Kling Commented Jul 16, 2014 at 3:01

7 Answers 7

This will work:-

$form.find('select').prop('selectedIndex',0);

I deselect all html selects in the form with this code succesfuly:

$("#form1").find('select').prop('selectedIndex', -1);

I tried and searched a lot on StackOverFlow but didn't get any solution to reset multiselect.Then i found This Link. That solved my Problem. Here is the code sample.

$("#yourcontrolid").multiselect('clearSelection');

Change the last line to this:

$form.find('select')[0].selectedIndex = 0;

selectedIndex is a property of HTMLElement and not jQuery object.

If you know the value, then you can do $form.find('select').val('value');

Below code worked for me:

$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');

$form.find('select').each(function(){
    $(this).val($(this).find('option:first').val());
});

This one works for me...

Been researching when I came to this question but none of the answers worked for me. However, just in case there is anyone else who visits this question within this same time frame, I found an answer.

$("#id option:selected").prop("selected", false);

Or

$("#id").val([]);

Both worked for me, clearing all selected values from a select field whether it has the multiple attribute or not.