Javascript to select first option of select list

Question

I need to create a reset button which on click will set all select lists in a form to index 0. I have tried this code for function, but it gives a syntax error on myForm.length;

<script type="text/javascript">function ResetForm(form) {     
var myForm = document.forms[form];   
  for( var i=0; i < myForm.length; i++ ){                                   
myForm.select[i].selectedIndex =0;     }  }

</script>

score 43 · Accepted Answer · answered Mar 02 '12 at 20:20

43

There is no such property as someForm.select, try this instead:

selectTags = myForm.getElementsByTagName("select");

for(var i = 0; i < selectTags.length; i++) {
  selectTags[i].selectedIndex =0;
}

answered Mar 02 '12 at 20:20

Another Code

3,083
21
23

9

selectElement.selectedIndex = 0; – danday74 Apr 07 '17 at 15:08

score 16 · Answer 2 · answered May 21 '19 at 15:14

16

A quick note to answer from Ron Royston (I've only tried this on Chrome 74.0)

Setting mySelect.selectedIndex = 0; or $('#mySelect').prop("selectedIndex", 0); won't work if the option if it's disabled.

Hope this saves someone some time and frustration!

answered May 21 '19 at 15:14

antman3351

436
3
8

score 9 · Answer 3 · answered Dec 26 '16 at 21:33

You simply need to set the .selectedIndex property, as in mySelect.selectedIndex = 0;. Try out the example below.

var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');

myCheckbox.addEventListener("click", function(e){
  if (this.checked){
    mySelect.disabled = false;     
  } else {
    mySelect.selectedIndex = 0;
    mySelect.disabled = true;     
  }
});

<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>

<select id="my-select" disabled>
  <option class="placeholder" selected disabled value="">Select credential</option>
  <option value="apples">apples</option>
  <option value="oranges">oranges</option>
  <option value="bananas">bananas</option>
</select>

Guerteltier · Answer 4 · 2013-06-04T20:31:06.640

1

This will set every selection directly after changing to the first option:

    <select onchange="your_selection_func(); this.selectedIndex=0;">

edited Jun 04 '13 at 20:31

answered Jun 04 '13 at 20:13

Guerteltier

11
2

score 0 · Answer 5 · answered Mar 27 '17 at 15:25

I found some hack:

<select onchange="doSomething()">
  <option value="a" selected disabled hidden>a</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="…">…</option>
</select>

combination of selected disabled hidden causes that (visualy) first option responds with change event (even with same value!).

Working with IE, Edge, Opera, Chrome, but not working in FF :(

score 0 · Answer 6 · answered Mar 02 '12 at 20:23

You may find jquery useful here. This SHOULD do the trick...

$(function()
{
    $('.resetButton').click(function()
    {
        $(this).closest('form').find('select').each(function()
        {
            $(this)[0].selectedIndex=0;
        });
    });
});

<input type="reset" class="resetButton" />

score -1 · Answer 7 · answered Mar 14 '14 at 20:35

I realize this is kinda old, but wanted to improve on teh1's answer. There's no reason to create a jQuery object from 'this' when you're just going to grab the DOM element back from it:

$(this).closest('form').find('select').each(function() {
    this.selectedIndex = 0;
});

Javascript to select first option of select list

7 Answers7

Linked

Related