Javascript to select first option of select list - select

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>

Answer 1

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;
}

Answer 2

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!

Answer 3

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>

Answer 4

This will set every selection directly after changing to the first option:
<select onchange="your_selection_func(); this.selectedIndex=0;">

Answer 5

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" />

Answer 6

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 :(

Answer 7

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