The Selected attribute belongs to the <option> element and is utilized to specify the default choice in a dropdown list.
If an option incorporates this attribute, it should be automatically selected and shown as the initial choice upon the webpage loading.
Syntax
Example
<option selected>
In this instance, the Selected attribute is employed within the <option> tag, featuring the value of Jaguar.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Example of selected attribute
</title>
</head>
<body>
<h4> Select Your favourite Car from the following given options: </h4>
<br>
<select name="cars">
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
<!-- In the following option tag we specify the selected attribute for the Jaguar value, which is display as selected on the web page by default. -->
<option value="Jaguar" selected> Jaguar </option>
<option value="BMW" > BMW </option>
<option value="Audi"> Audi </option>
</select>
</body>
</html>
Output:
Illustration 2: In this instance, the Selected attribute is applied within the <option> tag, set to the value Pomegranate.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Second Example of selected attribute
</title>
</head>
<body>
<h4> Select Your favourite fruit from the following list of fruits: </h4>
<br>
<select name="fruits">
<option value="Apple"> Apple </option>
<option value="Banana"> Banana </option>
<option value="Orange"> Orange </option>
<!-- In the following option tag we specify the selected attribute for the Pomegranate value, which is display as selected on the web page by default.-->
<option value="Pomegranate" selected> Pomegranate </option>
<option value="Grapes"> Grapes </option>
<option value="Mango"> Mango </option>
</select>
</body>
</html>
Output:
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<selected> |
Yes | Yes | Yes | Yes | Yes |