I need help accessing SELECT box

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rebeccatre@gmail.com - 21 Jul 2007 02:30 GMT

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! :-) :-)

Reply to this Message

David Mark - 21 Jul 2007 03:42 GMT

> Hi, so I can learn how to master, how do I access a select like this
> using javascript??
[quoted text clipped - 5 lines]
> <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.

Reply to this Message

RobG - 21 Jul 2007 08:01 GMT

>> Hi, so I can learn how to master, how do I access a select like this
>> using javascript??
[quoted text clipped - 8 lines]
> 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:
>
[quoted text clipped - 4 lines]
> <OPTION value="57282">Red</OPTION>
> </SELECT>

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

> 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,
>>
[quoted text clipped - 6 lines]
> {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[i];
/* do stuff with each option */
}

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

Yup.

Signature

Rob
"We shall not cease from exploration, and the end of all our
exploring will be to arrive where we started and know the
place for the first time." -- T. S. Eliot

Reply to this Message

Thomas 'PointedEars' Lahn - 01 Aug 2007 00:27 GMT

>>> <SELECT name="myselect">
>>> <OPTION value="73822">Green
[quoted text clipped - 6 lines]
>
> 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:
>>
[quoted text clipped - 19 lines]
>
> 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,
[quoted text clipped - 11 lines]
>
> 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[i];
> /* 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[i];
/* do stuff with each option */
}

PointedEars

Signature

Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not the
best source of advice on designing systems that use javascript.
-- Richard Cornford, <f806at$ail$1$8300dec7@news.demon.co.uk>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / July 2007

I need help accessing SELECT box