Modification SELECT données déroulant OPTION avec le bouton clic

Question

Je suis en train de manipuler des listes déroulantes par javascript, mais je semble obtenir ce code chaque fois que je clique sur un bouton:

TypeError: objDropDownMenu.options is undefined

objDropDownMenu.options[1].selected = true;

Voici mon code:

<FORM NAME="myform" ACTION="" METHOD="GET"> 
<SELECT class="select diff_data" style="WIDTH: 165px" name=CarPick> 
<OPTION value=1>Audi</OPTION> 
<OPTION value=2>BMW</OPTION> 
<OPTION value=3>Mercedes</OPTION> 
</SELECT> 

<INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(this.form)"> 
</FORM> 

<SCRIPT LANGUAGE="JavaScript"> 
var objDropDownMenu = document.getElementsByName("CarPick"); 



function writeText (form) { 
    objDropDownMenu.options[30].selected = true; 
} 
</SCRIPT> 

Anyu pourquoi? Merci!

Answer 1

Je ne suis pas sûr, si votre code est juste un exemple, mais sinon, il y a beaucoup de noms sans égal. Permet de résoudre ce problème:

<FORM NAME="myform" ACTION="" METHOD="GET"> 
<SELECT class="select diff_data" style="WIDTH: 165px" name="CarPick"> 
<OPTION value="1">Audi</OPTION> 
<OPTION value=2>BMW</OPTION> 
<OPTION value=3>Mercedes</OPTION> 
</SELECT> 

<INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(this.form)"> 
</FORM> 

<SCRIPT LANGUAGE="JavaScript"> 
var objDropDownMenu = document.getElementsByName("CarPick")[0]; //It is get elementS - all alements with that name are returned 



function writeText (form) { 
    objDropDownMenu.options[2].selected = true; //Here I wonder if 30th entry exists, 2 surelly does 
} 
</SCRIPT> 

Answer 2

getElementsByName renvoie toujours un array de objects.

Vous devez utiliser: objDropDownMenu[0].options[30].selected = true

Une meilleure façon de procéder est de définir un ID pour votre sélection, puis utiliser document.getElementById('yourid') qui retournera toujours un seul objet (car l'ID doit toujours être unique dans un document HTML).