Do select elements have a standard value property?

Question

This is a simple question but I cannot find any reference so here it goes.

Assume I have a select element:

<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Now I want to get its selected option's value. Most often I see this kind of snippet being used:

var sel = document.getElementById('sel');
console.log( sel.options[sel.selectedIndex].value ); //1

Which works great. However, I've found out that select elements also have a value property:

console.log( sel.value ); //1

See fiddle with both examples.

The second form is not only much simpler, it also works all the way back to IE6 (yes, I did actually test on that, here's the IE6 friendly version).

Is there a reason why the first approach is so much more widely accepted? Is there some incompatibility or corner-case issue with the second approach?

ps. My "most used approach" thesis was based mostly on personal experience, but as for reference, the two most upvoted answers in Get selected value in dropdown list using JavaScript? uses the first approach.

Relevant MDN page: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement — Paul S., Mar 27 '13 at 14:26
@PaulS. I see. The `value` returns the first selected option's value. You could use that in an answer. — Fabrício Matté, Mar 27 '13 at 14:27
@FabrícioMatté, it is not a good idea to ask for issues with corner-cases when you ignore corner cases. — zzzzBov, Mar 27 '13 at 14:27
@zzzzBov Ok my bad, let's take multiple values in account then. — Fabrício Matté, Mar 27 '13 at 14:28
@PaulS. I was looking at the `HTMLInputElement` but failed to find the `HTMLSelectElement`. That was pretty much which I was looking for. — Fabrício Matté, Mar 27 '13 at 14:30
@zzzzBov Even with the `multiple` property, both have the same output apparently http://jsfiddle.net/h9Sba/2/ — Fabrício Matté, Mar 27 '13 at 14:32
@FabrícioMatté *The `value` returns the first selected option's value*. That basically doesn't give any reason, since *`selectedIndex` is the index of the first selected ` — VisioN, Mar 27 '13 at 14:32
@VisioN What doesn't give reason? My thesis that `selectedIndex` is more used? From what I understand now after reading the references, both are equivalent. — Fabrício Matté, Mar 27 '13 at 14:33
@FabrícioMatté I'm just referring to your [comment](http://stackoverflow.com/questions/15661298/do-select-elements-have-a-standard-value-property#comment22227149_15661298). — VisioN, Mar 27 '13 at 14:34
@VisioN I meant that a `select`'s `value` property returns its first selected `option`'s `value`. — Fabrício Matté, Mar 27 '13 at 14:36
@FabrícioMatté In fact my first question was: *is it really so that approach with `selectedIndex` is more used?* Could you provide examples of that? — VisioN, Mar 27 '13 at 14:37
@VisioN Mostly personal experience, but I'll provide links shortly. — Fabrício Matté, Mar 27 '13 at 14:38
As for browser compatibility, AFAIR there was an issue in older IE (6, I think), that this would only work if the `option` elements actually had a `value` attribute. (Which is not required – the standard defines that the value of an option with no value _attribute_ is the text content of the option.) — CBroe, Mar 27 '13 at 14:42
@FabrícioMatté [Paolo's answer](http://stackoverflow.com/a/1085810/1249581) was mostly referring to picking up the `text` of selected option, but not to its value. — VisioN, Mar 27 '13 at 14:43
@CBroe I don't have IE6 to test, but if that's true then it seems it would make a reasonable answer. — Anthony Grist, Mar 27 '13 at 14:43
@VisioN The question itself was asking for a `value`. Of course, I understand he may have used that approach so both value and `text` is obtained in a similar manner. — Fabrício Matté, Mar 27 '13 at 14:45
@CBroe Thanks! Though I just tested and in that case both would fail (both return an empty string). `:(` — Fabrício Matté, Mar 27 '13 at 14:45

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

The MDN page tells us

options nsIDOMHTMLOptionsCollection The set of elements contained by this element. Read only.

selectedIndex long The index of the first selected element.

value DOMString The value of this form control, that is, of the first selected option.

However it also says

selectedOptions Unimplemented (see bug 596681) HTMLCollection The set of options that are selected. HTML5

Therefore, if you want to have a multi-select but general compatibility, you'll have to loop over options, but if you have a single-select, sel.options[sel.selectedIndex].value and sel.value are equivalent, but the prior is "more similar" to the form a loop for a multi-select would take.

Thanks, seeing the definition of the `select`'s `value` property in MDN relieves me as it is a standard property and not one of those introduced in HTML5. Guess I was just unaware of it until not long ago. — Fabrício Matté, Mar 27 '13 at 14:49

score 1 · Answer 2 · answered Mar 27 '13 at 15:21

1

The first option is widely accepted only because its more well known. The 2nd option is perfectly fine.

Have you verified that it works on Navigator 4?

answered Mar 27 '13 at 15:21

Kernel James

3,752
25
32

I only support old IE as it is widely used in some parts of the world, unfortunately. For other major browsers besides IE, I only test with the latest versions. Firefox 2 usage should be close to none even when compared to IE6 usage. – Fabrício Matté Mar 27 '13 at 23:56

Do select elements have a standard value property?

2 Answers2

Linked