Changing SELECT OPTION dropdown data with button click

Question

I'm trying to manipulate dropdown lists through javascript, but I seem to get this code every time I click a button:

TypeError: objDropDownMenu.options is undefined

objDropDownMenu.options[1].selected = true;

Here is my 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 idea why? Thanks!

And where is ProcStage defined?

epascarello
– epascarello

2013-02-04 14:58:51 +00:00
Commented Feb 4, 2013 at 14:58 — epascarello
– epascarello, Commented Feb 4, 2013 at 14:58
Sorry, I forgot to change it in my code :)

pufAmuf
– pufAmuf

2013-02-04 16:12:00 +00:00
Commented Feb 4, 2013 at 16:12 — pufAmuf
– pufAmuf, Commented Feb 4, 2013 at 16:12

OschtärEi · Accepted Answer · 2013-02-04 14:55:06Z

3

getElementsByName always returns an array of objects.

So you have to use: objDropDownMenu[0].options[30].selected = true

A better way to approach this is to set an ID for your select and then use document.getElementById('yourid') which will always return just one object (since the ID should always be unique in a HTML document).

answered Feb 4, 2013 at 14:55

OschtärEi

2,2753 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomáš Zato · Accepted Answer · 2013-02-04 14:59:20Z

I'm not sure, if your code is just an example, but if not, there many unmatching names. Lets fix that:

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

Collectives™ on Stack Overflow

Changing SELECT OPTION dropdown data with button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related