value attribute on <select> tag not selecting default option

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>

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.

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

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

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.