get the selected OPTION from SELECT

Discussion in 'Javascript' started by Chameleon, Mar 11, 2006.

  1. Chameleon

    Chameleon Guest

    In the code below I want to alert the selected option of select.
    In Mozilla the code works (If I choose "3" alerts it).
    In IE alerts: nothing appear
    ---------------------
    <script>
    function hi() {
    d = document.getElementById("day").value;
    alert(d);
    }
    </script>
    <select id=day onchange="hi();">
    <option>0
    <option>1
    <option>2
    <option>3
    <option>4
    </select>
    ---------------------
    Chameleon, Mar 11, 2006
    #1
    1. Advertising

  2. On 11/03/2006 19:31, Chameleon wrote:

    [Getting selected option element]

    Read the group FAQ: <http://www.jibbering.com/faq/>

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
    Michael Winter, Mar 11, 2006
    #2
    1. Advertising

  3. Chameleon

    Chameleon Guest

    Chameleon wrote:
    > In the code below I want to alert the selected option of select.
    > In Mozilla the code works (If I choose "3" alerts it).
    > In IE alerts: nothing appear
    > ---------------------
    > <script>
    > function hi() {
    > d = document.getElementById("day").value;
    > alert(d);
    > }
    > </script>
    > <select id=day onchange="hi();">
    > <option>0
    > <option>1
    > <option>2
    > <option>3
    > <option>4
    > </select>
    > ---------------------


    ok!
    the answer (in this case) is equivalent with:
    d = document.getElementById("day").selectedIndex;
    Chameleon, Mar 11, 2006
    #3
  4. Chameleon wrote:
    > Chameleon wrote:
    >> In the code below I want to alert the selected option of select.
    >> In Mozilla the code works (If I choose "3" alerts it).
    >> In IE alerts: nothing appear
    >> ---------------------
    >> <script>
    >> function hi() {
    >> d = document.getElementById("day").value;
    >> alert(d);
    >> }
    >> </script>
    >> <select id=day onchange="hi();">
    >> <option>0
    >> <option>1
    >> <option>2
    >> <option>3
    >> <option>4
    >> </select>
    >> ---------------------

    >
    > ok!
    > the answer (in this case) is equivalent with:
    > d = document.getElementById("day").selectedIndex;


    Well, it just happens to be the case. What if the *values* of the
    options are not 0, 1, 2, 3 etc?

    And CLOSE YOUR TAGS! That markup is *hideous*!
    TheBagbournes, Mar 11, 2006
    #4
  5. Chameleon

    Randy Webb Guest

    TheBagbournes said the following on 3/11/2006 4:37 PM:
    > Chameleon wrote:
    >> Chameleon wrote:
    >>> In the code below I want to alert the selected option of select.
    >>> In Mozilla the code works (If I choose "3" alerts it).
    >>> In IE alerts: nothing appear
    >>> ---------------------
    >>> <script>
    >>> function hi() {
    >>> d = document.getElementById("day").value;
    >>> alert(d);
    >>> }
    >>> </script>
    >>> <select id=day onchange="hi();">
    >>> <option>0
    >>> <option>1
    >>> <option>2
    >>> <option>3
    >>> <option>4
    >>> </select>
    >>> ---------------------

    >>
    >> ok!
    >> the answer (in this case) is equivalent with:
    >> d = document.getElementById("day").selectedIndex;

    >
    > Well, it just happens to be the case. What if the *values* of the
    > options are not 0, 1, 2, 3 etc?


    gEBI isn't the best way to access forms anyway.

    <URL: http://jibbering.com/faq/#FAQ4_13 >

    > And CLOSE YOUR TAGS! That markup is *hideous*!


    The only thing hideous about that markup, with regards to the
    select/options, is your perception of what is hideous.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Mar 12, 2006
    #5
  6. TheBagbournes wrote:

    > Chameleon wrote:
    >> Chameleon wrote:
    >>> <script>


    The required `type' attribute is missing:

    <script type="text/javascript">

    <URL:http://validator.w3.org/>

    >>> function hi() {
    >>> d = document.getElementById("day").value;
    >>> alert(d);
    >>> }
    >>> </script>
    >>> <select id=day onchange="hi();">


    Attribute values should be quoted always.

    >>> <option>0
    >>> <option>1
    >>> <option>2
    >>> <option>3
    >>> <option>4
    >>> </select>
    >>> ---------------------

    >>
    >> ok!
    >> the answer (in this case) is equivalent with:
    >> d = document.getElementById("day").selectedIndex;

    >
    > Well, it just happens to be the case.


    No, it is not.

    > What if the *values* of the options are not 0, 1, 2, 3 etc?


    What if document.getElementById() is not supported? Rare nowadays, but
    still possible.

    > And CLOSE YOUR TAGS! That markup is *hideous*!


    (Please do not SHOUT. There are *other* ways to /emphasize/ text.)

    A matter of taste regarding the HTML `option' element, since its end tag
    is optional even in HTML 4.01 Strict. I agree here, especially for XHTML
    (because not well-formed is, in a sense, hideous), and for the rest,
    though.


    PointedEars
    Thomas 'PointedEars' Lahn, Mar 12, 2006
    #6
  7. Chameleon

    RobG Guest

    Chameleon wrote:
    > Chameleon wrote:
    >
    >> In the code below I want to alert the selected option of select.
    >> In Mozilla the code works (If I choose "3" alerts it).
    >> In IE alerts: nothing appear
    >> ---------------------
    >> <script>
    >> function hi() {
    >> d = document.getElementById("day").value;
    >> alert(d);
    >> }
    >> </script>
    >> <select id=day onchange="hi();">
    >> <option>0
    >> <option>1
    >> <option>2
    >> <option>3
    >> <option>4
    >> </select>
    >> ---------------------

    >
    >
    > ok!
    > the answer (in this case) is equivalent with:
    > d = document.getElementById("day").selectedIndex;


    Actually, TheBagbournes was right that you are dependent upon coincidence.

    According to the W3C HTML 4 spec, if an option element doesn't have a
    value attribute, then the value is its text content. But IE doesn't
    follow the spec - if you don't have a value attribute, IE wants you to
    explicitly get the text, so:

    var sel = document.getElementById("day");
    var d = sel.options[sel.selectedIndex].text;


    will do the job. If you don't know whether there is a value attribute
    or not, then you'll have to test for it and, if it's undefined, get the
    text - something like:

    var sel = document.getElementById('day');
    var opt = sel.options[sel.selectedIndex];
    var d = opt.value || opt.text;


    Incidentally, the markup is fine for HTML - some will criticise you for
    closing tags that don't need closing - cest la vie.


    --
    Rob
    RobG, Mar 13, 2006
    #7
    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. Patrick Olurotimi Ige
    Replies:
    6
    Views:
    518
    =?Utf-8?B?TmljZW1hbg==?=
    Mar 11, 2005
  2. J. Hall
    Replies:
    2
    Views:
    1,063
    Jeff Thies
    Apr 21, 2004
  3. Dennis Marks
    Replies:
    1
    Views:
    3,391
    Nikita the Spider
    Sep 8, 2006
  4. John
    Replies:
    5
    Views:
    987
    dorayme
    Mar 1, 2010
  5. Mark Kolber
    Replies:
    4
    Views:
    340
Loading...

Share This Page