6

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>
Sean Kimball
  • 4,506
  • 9
  • 42
  • 73
  • 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 Jul 16 '14 at 02:39
  • 1
    can you show us markup, it works when I tried ? – Mritunjay Jul 16 '14 at 02: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 Jul 16 '14 at 02:47
  • The first option has no value ~ ideally I would like to resubmit the form with the select boxes set to the first [no value] option [so the form processor can set some session varibles] – Sean Kimball Jul 16 '14 at 02:50
  • Then `$form.find('select').prop('selectedIndex', 0);` will work fine. You should consider changing the title to something like "How select the first option of multiple select elements". *Resetting* a form usually means to reset the elements to the value they had when the page was loaded (i.e. what is specified in the HTML). – Felix Kling Jul 16 '14 at 02:50
  • ummm *scratch*scratch*scratch* no, cut and paste - no work. gonna fiddle it. – Sean Kimball Jul 16 '14 at 02:53
  • Works fine for me: http://jsfiddle.net/2r7xn/1/ – Felix Kling Jul 16 '14 at 02:56
  • Not for me - take a peek: http://jsfiddle.net/Qnq82/ – Sean Kimball Jul 16 '14 at 02:57
  • 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 `` resets the values as I described it (changes the values back to the ones defined in the HTML). – Felix Kling Jul 16 '14 at 02:58
  • 1
    Because of ` – Felix Kling Jul 16 '14 at 03:01
  • Yup - thanks, that's got it [argh!] – Sean Kimball Jul 16 '14 at 03:03
  • Duplicate of [How to make first option of – Felix Kling Jul 16 '14 at 03:04

7 Answers7

5

This will work:-

$form.find('select').prop('selectedIndex',0);
Mritunjay
  • 25,338
  • 7
  • 55
  • 68
3

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

$("#form1").find('select').prop('selectedIndex', -1);
Nuri Akman
  • 792
  • 3
  • 18
  • 41
3

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');
ARC
  • 1,061
  • 14
  • 33
1

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');

Amit Joki
  • 58,320
  • 7
  • 77
  • 95
1

Below code worked for me:

$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');
Sati
  • 19
  • 3
0
$form.find('select').each(function(){
    $(this).val($(this).find('option:first').val());
});

This one works for me...

Anonymous Helper
  • 11
  • 1
0

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.

Damoiskii
  • 1,328
  • 1
  • 5
  • 20