Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts

    Select.value (form) can be used?

    I remember on a book it says that there is no 'value' property on 'select' element in the form.

    However, I tested it on IE7/8/9, FF4, Select.value is unbelievably the item selected (i.e. Select.options[Select.seletecdIndex])

    Does it also work on Safari Chrome or older versions of IE and FF? Is it a good practice?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I have no idea why your book should say that there is no value property of a select list option. Rubbish! All browsers support it - at least from IE5 onwards.

    Code:
    <select onchange = "showValue(this)">
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Sunkist'> Sunkist </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Papaya'> Papaya </option>
    </select>
    
    
    <script type = "text/javascript">
    function showValue(selectbox) {
    var val = selectbox.value;
    alert ("Option value is " + val);
    }
    </script>
    The selected index is required only if the text of the option is to be captured, not the value.

    Code:
    <script type = "text/javascript">
    
    function showValue(selectbox) {
    var si = selectbox.selectedIndex;
    var txt = selectbox.options[si].text; 
    alert ("Option text is " + txt)
    }
    
    </script>
    This simple example may be helpful to you:-

    Code:
    <form name = "f">
    <select name = "s"><option></option><option></option><option></option></select><br>
    <input type = "button" value = "Populate Options" onclick = "populate()">
    
    <script type = "text/javascript">
    function populate() {
    var d = document.f.s;
    d.options[0].value = "1"; d.options[0].text = "One";
    d.options[1].value = "2"; d.options[1].text = "Two";
    d.options[2].value = "3"; d.options[2].text = "Three";
    }
    </script>
    The older I grow the more I distrust the familiar doctrine that age brings wisdom. - H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist
    Last edited by Philip M; 07-29-2011 at 05:39 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    so it is.

    actually the book is JavaScript the Definitive Guide 5th. the following is what it says about select element:

    In some ways, a select-multiple element is like a set of checkbox elements, and a select-one element is like a set of radio elements. The Select element differs from the toggle-button elements in that a single Select element represents an entire set of options. These options are specified in HTML with the <option> tag, and they are represented in JavaScript by Option objects stored in the options[] array of the Select element. Because a Select element represents a set of choices, it does not have a value property, as all other form elements do. Instead, as I'll discuss shortly, each Option object contained by the Select element defines a value property.

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    One thing to watch out for-if the selected option does not have a value,

    all browsers except IE before #9 return the selected option's text.

    Older IE's return the empty string in that case.
    Last edited by mrhoo; 07-29-2011 at 10:04 PM.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I think this is what the Guide really WANTED to say
    Because a Select element represents a set of choices, it does not have a value ATTRIBUTE, as all other form elements do. Instead, as I'll discuss shortly, each Option object contained by the Select element defines a value ATTRIBUTE. The select element always has a value PROPERTY which represents the value of the selected option in a select-one element and the value of the first selected option in a select-multiple element.

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,338
    Thanks
    13
    Thanked 348 Times in 344 Posts
    if you’re not sure, whether a property exists, consult the DOM or the HTMLDOM Specs.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Actually, folks, this "myth" isn't a myth, at all.

    Netscape 4.7 (and earlier) indeed did *NOT* support the .value property of a <select>, at all.

    So those of use who grew up trying to support MSIE 4 and Netscape 4 learned to do sel.options[sel.selectedIndex].value even though MSIE 4 *DID* support the .value property.

    How's that for a turn of events? MSIE had it "right" before Netscape.

    Now, it's possible that NS 4.7 was an aberration. Maybe NS 4.1 did support it. That I don't remember for sure. But I do remember the frustration with NS 4.7.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,372
    Thanks
    11
    Thanked 591 Times in 572 Posts
    one monkey-wrench to throw into the mix: the "multiple" attrib. selecting more that one option mean that both .value and .selectedIndex are useless.

    also, you can even set select.value, and so long as the sting you set it to is a valid option value, it automagically selects the proper index. pretty cool, and relatively under-used...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •