value attribute on <select> tag not selecting default option

Question

Perhaps i'm misunderstanding here, but given the following html:

<select value="2">
    <option value="1">Something</option>
    <option value="2">Something else</option>
</select>

I would expect "Something else" to be the default selected option. However, it does not seem to be. Why is this, and what should I be doing differently?

Solution 1

The only way to have a default option is to have selected in the option tag.

<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else

Solution 2

You use selected attribute on an option element to specify default option.

<select>
    <option value="1">Something</option>
    <option value="2" selected="selected">Something else</option> // this is default
</select>

select elements do not have a value attribute.

Solution 3

React JS

Some coding implementations such as ReactJS allow you to use a value attribute with the <select> tag so this would be perfectly valid code:

<select value="2">
    <option value="1">Something</option>
    <option value="2">Something else</option>
</select>

So if you are seeing code examples like this it is likely because it is in React or other similar library/framework.

Of course, with this approach, typically you would want to specify the value in state, so that it is updateable.

HTML with Attribute Minimization:

However, if you are using purely HTML you must use the selected attribute in your <option> tag as follows:

<select>
    <option value="1">Something</option>
    <option value="2" selected>Something else</option>
</select>

HTML with Full Attribute Specification:

The above uses attribute minimization, but you can also specify the full form if you want:

<select>
    <option value="1">Something</option>
    <option value="2" selected="selected">Something else</option>
</select>

Solution 4

The <select> element does not have a value attribute so that is ignored. So, you have a single selection <select> and none of its <option> elements have the selected attribute, that means that the first <option> is taken as the default selection.

View more solutions

Comments

[crazy2be]

Hrmph. That's against how all of the other form elements work :/.

[BalusC]

@crazy: it allows the element to have multiple selected values. @doc: your theory about the value attribute is entirely wrong.

[uncaught_exceptions]

@BalusC. I agree. The select tag does not have a value option. I have edited my answer.

[crazy2be]

Hrm. I'll have to set the default using javascript then, mustache templates don't seem to allow equality testing within the templates... Anyway, thanks for your answer!

[nanospeck]

@crazy2be could you share the javascript code you used to do this.

[crazy2be]

@nanospeck: I no longer have the exact code, unfortunately. I imagine I may also have used a hack something like github.com/crazy2be/wfdr-example/blob/master/shared/tmpl/bas‌​e/… in the mustache template (i.e. defining each possible value in a map or struct and checking for existence, rather than doing comparison).

[AKJ]

Hi, may i know what purpose does the 'value' in the <select> tag serves? I am coding in ReactJS and i happen to see some code snippets but not sure what it does

[kojow7]

@AKJ The value in your select tag is basically just setting the default option. It makes things easier from a dynamic perspective because, if you are wanting to display a specific option that is selected, normally, you would have to go through each option and find the value you are after, and then add the selected attribute. With React JS and some other implementations, all you need to do is update the value attribute of the select tag and it does it all for you.

[AKJ]

If the value is null then what would the default be? The top most option?

[kojow7]

@AKJ I'm not sure, you'd have to test it out to be sure. It would be up to React to decide how it would generate the code and the browser to know what to do with that generated code.

[kojow7]

@AKJ, Have a look at this post: stackoverflow.com/questions/36187522/…