Javascript per selezionare la prima opzione della lista di selezione

Question

Ho bisogno di creare un pulsante di reset che al clic imposterà tutte le liste di selezione in una forma per indicizzare 0. Ho provato questo codice per la funzione, ma dà un errore di sintassi su myForm. lunghezza;

<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

Non esiste una proprietà come someForm.select, provate questo invece:

selectTags = myForm.getElementsByTagName("select"); 

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

Answer 2

Si possono trovare jQuery utili qui. Questo dovrebbe fare il trucco ...

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

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

Answer 3

Questo imposterà ogni selezione direttamente dopo aver cambiato per la prima opzione:

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

Answer 4

Mi rendo conto che questo è un pò vecchio, ma ha voluto migliorare la risposta di teh1. Non c'è alcun motivo per creare un oggetto jQuery da 'questo' quando si sta solo andando a prendere l'elemento DOM indietro da esso:

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

Answer 5

è sufficiente impostare la proprietà .selectedIndex, come in mySelect.selectedIndex = 0;. Prova l'esempio qui sotto.

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 6

ho trovato qualche trucco: (! Anche con lo stesso value)

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

combinazione di cause che selected disabled hidden (visualmente) prima opzione risponde con change evento.

Lavorare con IE, Riva, Opera, Chrome, ma non lavorare in FF :(