How to reset multiple select boxes in a form with jquery?

javascript, jquery

Solution

This will work:-

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

Problem

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

Original source

Related problems