How to access <select> value via DOM?

[Joshua Beall]

Hi All,

I am doing some JS, and I want to be able to access the currently selected
option in a <select> tag via the DOM. Here's what I'm doing:

<form name="form1">
<select name="option">
<option>East</option>
<option>West<option>
</select>
</form>

Then to access it, I look in the JS variable "document.form1.option.value" -
however, it is blank.

If I change to

<form name="form1">
<input type="text" name="option">
</form>

Then the JS variable "document.form1.option.value" holds whatever I type in
the textbox. Is there some other way I am supposed to access the <select>?

Thanks for any help!

Sincerely,
-Josh

 

[Philip Ronan]

I am doing some JS, and I want to be able to access the currently selected
option in a <select> tag via the DOM. Here's what I'm doing:

<form name="form1">
<select name="option">
<option>East</option>
<option>West<option>
</select>
</form>

Then to access it, I look in the JS variable "document.form1.option.value" -
however, it is blank.

Try this (untested, and excuse the wrapping):

document.form1.option.options[document.form1.option.options.selectedIndex].v
alue

 

[Philip Ronan]

document.form1.option.options[document.form1.option.options.selectedIndex].v
alue

Ooops, let's try that again.

document.form1.option.options[document.form1.option.selectedIndex].value

"option" is perhaps a slightly confusing name to choose.

It obviously confused me anyway!

 

[Joshua Beall]

document.form1.option.options[document.form1.option.selectedIndex].value

"option" is perhaps a slightly confusing name to choose.

Agreed - I actually used a different name in my code, I just typed up that
hasty example by hand.

At any rate, I actually already tried that, and it didn't work. However,
document.img1.alignment.options[document.img1.alignment.selectedIndex] (the
real names; img1 is the form, alignment is the <select>) is an object of
some sort, and document.img1.alignment.selectedIndex does indeed give the
correct index.

Here's a question: is there a way to look at everything inside an object?
For instance, to say "show me every property, and the value of every
property in this object?" Some other languages provide an easy way to do
this, like PHP's print_r() function.

 

[Andrew Urquhart]

Hi All,

I am doing some JS, and I want to be able to access the currently selected
option in a <select> tag via the DOM. Here's what I'm doing:

<form name="form1">
<select name="option">
<option>East</option>
<option>West<option>
</select>
</form>

Then to access it, I look in the JS variable "document.form1.option.value" -
however, it is blank.

[snip]

var objSelect = document.forms["form1"].elements["option"];
var strSelect = objSelect.options[objSelect.selectedIndex].text;

NB: You've not used the value attribute of the option element, if you
had, you'd need to use 'value' and not 'text'

 

[Joshua Beall]

At any rate, I actually already tried that, and it didn't work. However,
document.img1.alignment.options[document.img1.alignment.selectedIndex]
(the real names; img1 is the form, alignment is the <select>) is an object
of some sort, and document.img1.alignment.selectedIndex does indeed give
the correct index.

I got it: it's .value, not .text. So the whole thing would look like:

document.img1.alignment.options[document.img1.alignment.selectedIndex].text

I am no fan of JS. I don't understand why it should be "text" and not
"value"!!

Here's a question: is there a way to look at everything inside an object?
For instance, to say "show me every property, and the value of every
property in this object?" Some other languages provide an easy way to do
this, like PHP's print_r() function.

I am still interested in know the answer to this question - it could have
saved me a lot of angst by letting me immediately look at the whole object,
and I would be able to see what I needed. I was basically flying blind as
is.

 

[Michael Winter]

On Tue, 19 Oct 2004 21:44:06 GMT, Joshua Beall

[snip]

Here's a question: is there a way to look at everything inside an object?

Not everything, no. All properties of an object have a set of internal
properties attached to them. Certain built-in properties have the DontEnum
internal property, meaning that they can only be accessed if you query
them directly. Other properties, and *all* user-defined properties, are
enumerable.

for(var prop in obj) {
}

will loop through all the enumerable properties the object, obj. On each
iteration, prop will contain the name of a property as a string. If you
want to check the value of that property, you can use bracket property
accessors:

obj[prop] // do something with the property

More information regarding bracket notation[1] can be found in the
comp.lang.javascript FAQ (<URL:http://jibbering.com/faq/>) and its notes
(<URL:http://www.jibbering.com/faq/faq_notes/faq_notes.html>).

[snip]

Hope that helps,
Mike


[1] Direct link:

<URL:http://www.jibbering.com/faq/faq_notes/square_brackets.html>

 

[Philip Ronan]

At any rate, I actually already tried that, and it didn't work. However,
document.img1.alignment.options[document.img1.alignment.selectedIndex] (the
real names; img1 is the form, alignment is the <select>) is an object of
some sort, and document.img1.alignment.selectedIndex does indeed give the
correct index.

Aha. Try "text" instead of "value". Should work.

Here's a question: is there a way to look at everything inside an object?
For instance, to say "show me every property, and the value of every
property in this object?" Some other languages provide an easy way to do
this, like PHP's print_r() function.

I wrote a bit of Javascript to do this sort of thing once, but it worked
better in some browsers than in others.

Basically looks for a "length" property in the object. If it exists, then
you can step through each property with a numeric index (i.e., myObject[0],
myObject[1], ... etc.) If you cast the results to strings and spew them out
with document.write commands, then you can get a similar effect to
print-r().

I'll dust it off and post it somewhere when I find the time.

Phil

 

[Michael Winter]

On Tue, 19 Oct 2004 21:48:08 GMT, Joshua Beall

[snip]

I am no fan of JS. I don't understand why it should be "text" and not
"value"!!

The text property of an OPTION element refers to the string that's
displayed in the SELECT element. The value property refers to the value
specified by the value attribute.

I must, say, I'm surprised by the fact that the value attribute came up
blank. I thought an OPTION element was supposed to use its content as its
value if one wasn't specified.

[snip]

Mike

 

[Andrew Urquhart]

*Michael Winter* wrote:
[snip]

I must, say, I'm surprised by the fact that the value attribute came up
blank. I thought an OPTION element was supposed to use its content as its
value if one wasn't specified.

Indeed; the wording for successful form submission is quite clear:

http://www.w3.org/TR/REC-html40/interact/forms.html#adef-value-OPTION
'
value = cdata [CS]
This attribute specifies the initial value of the control. If this
attribute is not set, the initial value is set to the contents of the
OPTION element.
'

- but then 'DOM0' is not a standard, so it doesn't have to conform to
such rules

 

[Jeffrey Silverman]

I am doing some JS, and I want to be able to access the currently selected
option in a <select> tag via the DOM. Here's what I'm doing:

<form name="form1">
<select name="option">
<option>East</option>
<option>West<option>
</select>
</form>

Then to access it, I look in the JS variable "document.form1.option.value" -
however, it is blank.

If I change to

<form name="form1">
<input type="text" name="option">
</form>

You are missing the value="" attribute for the <option> tags, for example:

<form name="form1">
<select name="option">
<option value="East">East</option>
<option value="West">West<option>
</select>
</form>

The stuff that goes in beteween <option></option> has no bearing on the
value -- only what is the "value" attribute.

 

[Toby Inkster]

I am no fan of JS. I don't understand why it should be "text" and not
"value"!!

..text and .value do different things:

<option value="value">text</option>

 

[Joshua Beall]

.text and .value do different things:

<option value="value">text</option>

AFAIK, when you omit the value attribute, it is supposed to be set to the
text value. Andrew pointed out this W3C reference, which seems to support
my understanding:
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-value-OPTION

 

[Joshua Beall]

On Tue, 19 Oct 2004 21:24:41 +0000, Joshua Beall wrote:
<form name="form1">
<select name="option">
<option value="East">East</option>
<option value="West">West<option>
</select>
</form>

The stuff that goes in beteween <option></option> has no bearing on the
value -- only what is the "value" attribute.

No - from
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-value-OPTION
(scroll up a few lines to see what I am quoting)

"value CDATA #IMPLIED -- defaults to element content --"

 

[Jeffrey Silverman]

No - from
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-value-OPTION
(scroll up a few lines to see what I am quoting)

"value CDATA #IMPLIED -- defaults to element content --"

I see. Then why were your JavaScript values coming back blank?

 

[Joshua Beall]

I see. Then why were your JavaScript values coming back blank?

Presumably because Microsoft, in their infinite wisdom, decided they could
make their own rules

 

[Jeffrey Silverman]

Presumably because Microsoft, in their infinite wisdom, decided they could
make their own rules

I use zero MS products (stretching the truth a bit. More accurate is "I
use MS products only when absolutely necessary").

Long live Tux