Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to access <select> value via DOM?

Reply
Thread Tools

How to access <select> value via DOM?

 
 
Joshua Beall
Guest
Posts: n/a
 
      10-19-2004
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


 
Reply With Quote
 
 
 
 
Philip Ronan
Guest
Posts: n/a
 
      10-19-2004
Joshua Beall wrote:

> 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
http://www.velocityreviews.com/forums/(E-Mail Removed)
(Please remove the "z"s if replying by email)


 
Reply With Quote
 
 
 
 
Philip Ronan
Guest
Posts: n/a
 
      10-19-2004
Philip Ronan wrote:

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

--
Philip Ronan
(E-Mail Removed)
(Please remove the "z"s if replying by email)


 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      10-19-2004
"Philip Ronan" <(E-Mail Removed)> wrote in message
news:BD9B4574.24101%(E-Mail Removed)...
> 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.


 
Reply With Quote
 
Andrew Urquhart
Guest
Posts: n/a
 
      10-19-2004
*Joshua Beall* wrote:
> 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'
--
Andrew Urquhart
- FAQ: http://www.html-faq.com/
- Archive: http://groups.google.com/groups?group=alt.html
- Reply: http://andrewu.co.uk/contact/
 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      10-19-2004
"Joshua Beall" <(E-Mail Removed)> wrote in message
news:GUfdd.2794$EP4.1183@trnddc06...
> "Philip Ronan" <(E-Mail Removed)> wrote in message
> news:BD9B4574.24101%(E-Mail Removed)...
>
> 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.


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      10-19-2004
On Tue, 19 Oct 2004 21:44:06 GMT, Joshua Beall
<(E-Mail Removed)> wrote:

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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
Philip Ronan
Guest
Posts: n/a
 
      10-19-2004
Joshua Beall wrote:

> 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

--
Philip Ronan
(E-Mail Removed)
(Please remove the "z"s if replying by email)


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      10-19-2004
On Tue, 19 Oct 2004 21:48:08 GMT, Joshua Beall
<(E-Mail Removed)> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
Andrew Urquhart
Guest
Posts: n/a
 
      10-19-2004
*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/inte...f-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
--
Andrew Urquhart
- FAQ: http://www.html-faq.com/
- Archive: http://groups.google.com/groups?group=alt.html
- Reply: http://andrewu.co.uk/contact/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
access Access via PIX ? barret bonden Cisco 1 07-28-2008 06:18 AM
VS.NET, ASP.NET - using via Frontpage Ext, now via SHAREPOINT? Gerry Hickman ASP .Net 2 12-14-2005 09:25 PM
Cordless phone via ATA via RJ45 router with no provider possible? ChrisR VOIP 10 04-26-2005 06:55 PM
How to restrict direct access to JSP files, only allow access via servlet? Anan Java 8 12-08-2004 11:16 PM
How do I let people access the internet via an access point but not allow them access to my network yar Wireless Networking 4 09-21-2004 03:48 AM



Advertisments