How to access <select> value via DOM?

Discussion in 'HTML' started by Joshua Beall, Oct 19, 2004.

  1. Joshua Beall

    Joshua Beall Guest

    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
    Joshua Beall, Oct 19, 2004
    #1
    1. Advertising

  2. Joshua Beall

    Philip Ronan Guest

    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

    (Please remove the "z"s if replying by email)
    Philip Ronan, Oct 19, 2004
    #2
    1. Advertising

  3. Joshua Beall

    Philip Ronan Guest

    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

    (Please remove the "z"s if replying by email)
    Philip Ronan, Oct 19, 2004
    #3
  4. Joshua Beall

    Joshua Beall Guest

    "Philip Ronan" <> wrote in message
    news:BD9B4574.24101%...
    > 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.
    Joshua Beall, Oct 19, 2004
    #4
  5. *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/
    Andrew Urquhart, Oct 19, 2004
    #5
  6. Joshua Beall

    Joshua Beall Guest

    "Joshua Beall" <> wrote in message
    news:GUfdd.2794$EP4.1183@trnddc06...
    > "Philip Ronan" <> wrote in message
    > news:BD9B4574.24101%...
    >
    > 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.
    Joshua Beall, Oct 19, 2004
    #6
  7. On Tue, 19 Oct 2004 21:44:06 GMT, Joshua Beall
    <> 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.
    Michael Winter, Oct 19, 2004
    #7
  8. Joshua Beall

    Philip Ronan Guest

    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

    (Please remove the "z"s if replying by email)
    Philip Ronan, Oct 19, 2004
    #8
  9. On Tue, 19 Oct 2004 21:48:08 GMT, Joshua Beall
    <> 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.
    Michael Winter, Oct 19, 2004
    #9
  10. *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 :)
    --
    Andrew Urquhart
    - FAQ: http://www.html-faq.com/
    - Archive: http://groups.google.com/groups?group=alt.html
    - Reply: http://andrewu.co.uk/contact/
    Andrew Urquhart, Oct 19, 2004
    #10
  11. On Tue, 19 Oct 2004 21:24:41 +0000, 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.
    >
    > 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.

    --
    Jeffrey Silverman

    ** Drop "PANTS" to reply by email
    Jeffrey Silverman, Oct 20, 2004
    #11
  12. Joshua Beall

    Toby Inkster Guest

    Joshua Beall wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 20, 2004
    #12
  13. Joshua Beall

    Joshua Beall Guest

    "Toby Inkster" <> wrote in message
    news:p...
    > Joshua Beall wrote:
    >
    >> 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>


    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, Oct 20, 2004
    #13
  14. Joshua Beall

    Joshua Beall Guest

    "Jeffrey Silverman" <> wrote in message
    news:p...
    > 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 --"
    Joshua Beall, Oct 20, 2004
    #14
  15. Jeffrey Silverman, Oct 20, 2004
    #15
  16. Joshua Beall

    Joshua Beall Guest

    "Jeffrey Silverman" <> wrote in message
    news:p...
    > On Wed, 20 Oct 2004 13:55:35 +0000, Joshua Beall wrote:
    >
    >> 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?


    Presumably because Microsoft, in their infinite wisdom, decided they could
    make their own rules :)
    Joshua Beall, Oct 20, 2004
    #16
  17. On Wed, 20 Oct 2004 17:04:32 +0000, Joshua Beall wrote:

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

    --
    Jeffrey D. Silverman |
    Website | http://www.newtnotes.com

    Drop "PANTS" to reply by email
    Jeffrey Silverman, Oct 20, 2004
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. palmiere
    Replies:
    1
    Views:
    377
    Erwin Moller
    Feb 9, 2004
  2. Replies:
    2
    Views:
    88
    Martin Honnen
    Jan 16, 2005
  3. Robert Oschler
    Replies:
    1
    Views:
    118
    Robert Oschler
    Sep 3, 2005
  4. Adam Tilghman

    Creating SELECT MULTIPLE via DOM methods

    Adam Tilghman, Dec 15, 2005, in forum: Javascript
    Replies:
    6
    Views:
    74
  5. Replies:
    1
    Views:
    110
Loading...

Share This Page