I need help accessing SELECT box

[rebeccatre]

Hi, so I can learn how to master, how do I access a select like this
using javascript??

<SELECT name="myselect">
<OPTION value="73822">Green
<OPTION value="38147">Blue
<OPTION value="67289">Purple
<OPTION value="57282">Red
</SELECT>

I want to,

1) change Blue value from '38147' to '38150'
2) change Purple label to Orange
3) change Red value from "57282" to "57300" and also change Red label
to Pink (can be done all on 1 line?)

Can someone help me with these examples? I am doing some more complex
db stuff around it, but this will be helpful to get me rolling.

Thank you! Have a great day -- I appreciate it!

 

[David Mark]

Hi, so I can learn how to master, how do I access a select like this
using javascript??

<SELECT name="myselect">
<OPTION value="73822">Green
<OPTION value="38147">Blue
<OPTION value="67289">Purple
<OPTION value="57282">Red
</SELECT>

First off, if this is not inside a form, you need to give it an id
attribute to find it. And you need to close those option tags. Like
this:

<SELECT name="myselect" id="myselect">
<OPTION value="73822">Green</OPTION>
<OPTION value="38147">Blue</OPTION>
<OPTION value="67289">Purple</OPTION>
<OPTION value="57282">Red</OPTION>
</SELECT>

Now you can get a reference to the element object with
document.getElementById('myselect').

I want to,

1) change Blue value from '38147' to '38150'
2) change Purple label to Orange
3) change Red value from "57282" to "57300" and also change Red label
to Pink (can be done all on 1 line?)

var el = document.getElementById('myselect');if (el)
{el.options[1].value = '38150';el.options[2].text =
'Orange';el.options[3].value = '57300';}

Can someone help me with these examples? I am doing some more complex
db stuff around it, but this will be helpful to get me rolling.

This looks more like a homework assignment to me.

 

[RobG]

First off, if this is not inside a form, you need to give it an id
attribute to find it.

Since it has a name, it can be found using getElementsByName. If placed
in a form, it can also be found using the form's elements collection.

And you need to close those option tags.

Closing tags for option elements are optional in HTML.

Like this:

<SELECT name="myselect" id="myselect">
<OPTION value="73822">Green</OPTION>
<OPTION value="38147">Blue</OPTION>
<OPTION value="67289">Purple</OPTION>
<OPTION value="57282">Red</OPTION>
</SELECT>

Or:
<form id="formA" ...>
<div>
<select name="myselect" ...>
<option ...>
<option ...>
</select>
</div>

Now you can get a reference to the element object with
document.getElementById('myselect').
document.getElementById('formA').elements['myselect'];

or

document.getElementsByName('myselect')[0];

I want to,

1) change Blue value from '38147' to '38150'
2) change Purple label to Orange
3) change Red value from "57282" to "57300" and also change Red label
to Pink (can be done all on 1 line?)

var el = document.getElementById('myselect');if (el)
{el.options[1].value = '38150';el.options[2].text =
'Orange';el.options[3].value = '57300';}

Alternatively a for loop can be used to loop through the options to find
the ones with certain values or text to change:

var opt;
var sel = document.getElementById('formA').elements['myselect'];
for (var i=0, len=sel.options.length; i<len; i++){
opt = sel.options;
/* do stuff with each option */
}

This looks more like a homework assignment to me.

Yup.

 

[Thomas 'PointedEars' Lahn]

<SELECT name="myselect">
<OPTION value="73822">Green
<OPTION value="38147">Blue
<OPTION value="67289">Purple
<OPTION value="57282">Red
</SELECT>

[...]
And you need to close those option tags.

Closing tags for option elements are optional in HTML.

I would rather close them, too, for inconsistent whitespace
normalization might produce inconsistent results.

Like this:

<SELECT name="myselect" id="myselect">
<OPTION value="73822">Green</OPTION>
<OPTION value="38147">Blue</OPTION>
<OPTION value="67289">Purple</OPTION>
<OPTION value="57282">Red</OPTION>
</SELECT>

Or:
<form id="formA" ...>
<div>
<select name="myselect" ...>
<option ...>
<option ...>
</select>
</div>

Now you can get a reference to the element object with
document.getElementById('myselect').

document.getElementById('formA').elements['myselect'];

(The trailing semicolon really does not make sense there )

The D::gEBI() call is not necessary. HTMLDocument::forms and other
W3C DOM Level 2 HTML collections support IDs as well:

document.forms["formA"].elements["myselect"]

However, giving the form element a name (attribute) and then use the
above is better, because backwards-compatible down to DOM Level 0.

[...]

I want to,

1) change Blue value from '38147' to '38150'
2) change Purple label to Orange
3) change Red value from "57282" to "57300" and also change Red label
to Pink (can be done all on 1 line?)

var el = document.getElementById('myselect');if (el)
{el.options[1].value = '38150';el.options[2].text =
'Orange';el.options[3].value = '57300';}

Alternatively a for loop can be used to loop through the options to find
the ones with certain values or text to change:

var opt;

You could as well declare the variable where you assign to it; that
would not introduce a performance reduction, but would be cheaper to
maintain.

var sel = document.getElementById('formA').elements['myselect'];
for (var i=0, len=sel.options.length; i<len; i++){
opt = sel.options;
/* do stuff with each option */
}

When iteration order is unimportant, for performance any zero-to-length
for-loop should be rewritten to a length-to-zero for-loop like the
following:

var sel = document.forms['formA'].elements['myselect'];
for (var i = sel.options.length; i--
{
var opt = sel.options;
/* do stuff with each option */
}


PointedEars