5

Given the HTML:

<select id="mySelect">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

and the javascript:

var e = document.getElementById('mySelect');

To get the value of the select I can use e.value and e.options[e.selectedIndex].value.

I am aware that e.options[e.selectedIndex].value will give me the selected value (1,2 or 3) and e.options[e.selectedIndex].text would give me test1, test2, test3 depending on which is selected.

Is it ok to use just e.value? was this a problem in old browsers?
which is more correct: e.value vs e.options[e.selectedIndex].value?

jsFiddle

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Rikard
  • 7,485
  • 11
  • 55
  • 92
  • I can't see why not use the standard `e.value`. There're no browsers compatibility issues documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select – emerson.marini Aug 11 '14 at 18:31
  • Both are correct. `e.value` takes less space which can be desirable from a bandwidth point of view. – Travis J Aug 11 '14 at 18:31
  • 1
    @Rikard As you have suggested, it was an issue in very old browsers. You could not use `.value` on the select itself, you had to get the selected option and take the value of that. – James Montagne Aug 11 '14 at 18:38
  • @JamesMontagne ok, interesting. Which browsers in IE-time-measures had problems? IE6- or less old like IE8-? – Rikard Aug 11 '14 at 18:39
  • `value` is not an attribute of `select` according to MDN or W3C (http://www.w3.org/wiki/HTML/Elements/select). However, it seems to work in all browsers, so looks like it's safe to use. – Rick Hitchcock Aug 11 '14 at 18:40
  • 1
    @Rikard A quick google found that it didn't work at all in Netscape 4 and that IE6&7 had some oddities, though it wasn't fully broken. – James Montagne Aug 11 '14 at 18:41
  • @RickHitchcock interesting also. Hmmm... if W3C does not refer it feels strange this works. I would like to see a answer explaining my question. – Rikard Aug 11 '14 at 18:44
  • 1
    @RickHitchcock: you need to learn about the difference between DOM properties and HTML attributes. Select elements [do indeed have a `.value`](http://www.w3.org/TR/html5/forms.html#dom-select-value) – Bergi Aug 11 '14 at 19:15
  • @MelanciaUK: The incompatibilities not being documented doesn't mean they don't exist :-) MDN isn't a very reliable ressource in that regard. – Bergi Aug 11 '14 at 19:17
  • 3
    @Bergi, I stand corrected! Nice to know select.value is safe to use. But is that new as of HTML5? All the discussion here says we should use `options ... selectedIndex`: http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript – Rick Hitchcock Aug 11 '14 at 19:28
  • So many of us have been using selectedIndex for so many years - not because value wasn't a standard property, but because IE6 didn't support it. It's safe to say IE6 isn't an issue anymore. I have to wonder what other convolutions I use in my code, simply because IE6 didn't follow standards. Sorry for the confusion! – Rick Hitchcock Aug 12 '14 at 03:47
  • @RickHitchcock you are so right. IE not following standards has been "painfull". – Rikard Aug 12 '14 at 07:47

3 Answers3

6

The HTMLSelectElement interface includes the value attribute at least since Document Object Model (DOM) Level 1 Specification, from 1998.

However, like it is explained in this w3c mailing list, the problem was that HTML4.01 spec was vague:

It's true that HTML4.01 doesn't explicitly specify a value attribute for SELECT, but it does seem to be implied:

  • 'Menu' is a control type. (HTML4.01 17.2.1)

  • "Each control has both an initial value and a current value, both of which are character strings" (HTML4.01 17.2)

  • And SELECT may have an onchange attribute which implies a value. (HTML4.01 17.6)

But there's no mention of what the value represents, nor of what the initial or default values might be.

However, checking in IE5 and Mozilla, the value of SELECT does indeed return a string corresponding to the value of the currently selected OPTION.

(...) Probably wouldn't be a problem if HTML4.01 had been more explicit.

This was fixed in following definitions.

You can see it defined here:

So I think it's safe to use.

Oriol
  • 274,082
  • 63
  • 437
  • 513
3

Some old (~2005) threads from the comp.lang.javascript newsgroup, as well as their FAQ [1], mention that .value access was not supported in Netscape Navigator 4 (i.e. pre-2000), and some other mobile and desktop browsers that were considered "old" even at that time.

Conclusion (backed by @Oriol's DOM spec excerpts): It's totally safe to use today.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
0
document.getElementById('submit').onclick = function() {
    var e = document.getElementById("pets");
    var text = e.options[e.selectedIndex].text;
    document.getElementById("container").innerHTML = 'The selected text is ' + text;
}
ANSHUL VERMA
  • 1
  • 1
    While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Jan 12 '22 at 16:18