Select object value

Question

I just saw the following: http://www.w3schools.com/jsref/prop_option_value.asp

And wonder if there's something wrong with selectObject.value. Why not a simple approach:

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                function displayResult(){
                    alert(document.getElementById("mySelect").value);
                }
            </script>
        </head>
    <body>
        <form>
            Select your favorite fruit:
            <select id="mySelect">
                  <option value="apple">Apple</option>
                  <option value="orange">Orange</option>
                  <option value="pineapple">Pineapple</option>
                  <option value="banana">Banana</option>
            </select>
        </form>
        <button type="button" onclick="displayResult()">
            Display value of selected fruit
        </button>
    </body>
</html>

It seems to be working with no problem.

Thanks in advance!

Mike

Radio buttons require a convoluted process to access, but I've never had similar issues with <select> inputs. — Scott Stevens
– Scott Stevens, Commented Jun 9, 2012 at 3:28
Well, I've thought for years that you had to go the way of using the selectedIndex when getting a selects value. However, reviewing MDN's information on select properties, it appears I was wrong and it is available for accessing the (first) option element's selected value. Am I missing something, or was I just lead astray? Now I'm wondering if the selectedIndex was was meant for accessing multi-select values. Anybody care to disabuse me, please be my guest. Also, MDN is a legitimate resource for learning. — Jared Farrish
– Jared Farrish, Commented Jun 9, 2012 at 3:40
@Pointy: It's not just W3Schools -- I've seen that method in many other references too. — Mori
– Mori, Commented Jun 9, 2012 at 3:43
You might take a look at MDN's Javascript Learning offerings, as well as the articles offered on the MDN Javascript Reference site. But yeah, w3schools is a bit discredited on SO, even though probably most of it is not "wrong". Just not necessarily dependable credible (w3fools.com). — Jared Farrish
– Jared Farrish, Commented Jun 9, 2012 at 3:44

John Stimac · Accepted Answer · 2012-06-09 06:10:58Z

Your method, document.getElementById("mySelect").value is returning the value of the select object - which sets itsself to the value of the currently selected option. The way w3Schools is doing it is finding the actual option tag, then you're getting the value of the option tag. So, as long as you are accessing the currently selected option tag, they return the exact same thing. However, the w3schools way allows you to actually set the value of the option tag instead of changing which option is selected when setting the value property (although that's probably not what you want).

Example:

<select id='select'>
    <option value=1>one</option>
    <option value=2>two</option>
</select>

x=document.getElementById("mySelect").selectedIndex;

So, document.getElementById('select').value; returns the value of the select element.

And document.getElementsByTagName("option")[x].value; returns the value of the selected option element.

Meaning that document.getElementById('select').value=2 changes which option is selected, while document.getElementsByTagName("option")[x].value=2 changes the value of the selected option element.

TLDR: When getting the value there is no difference, when setting the value there is.

Collectives™ on Stack Overflow

Select object value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related