HTML <option> selected Attribute

The selected attribute in the <option> element pre-selects an option when the page loads. The same option would be visible.

Following is the syntax −

<option selected>

Let us now see an example to implement the selected attribute of the <option> element −

Example

<!DOCTYPE html>
<html>
<body>
<h1>Educational Qualification</h1>
<h2>Postgraduation</h2>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech" selected>M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</body>
</html>

Output

HTML <option> selected Attribute

In the above example, we have a <select> to set a drop-down list:

<select>
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech" selected>M.TECH</option>
<option value="msc">M.Sc</option>
</select>

In that, different options are set with <option> element −

<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech" selected>M.TECH</option>
<option value="msc">M.Sc</option>

We have set the default visible option when the page loads using the selected attribute −

<option value="mtech" selected>M.TECH</option>