The DOM Option defaultSelected Property is used to return the default value of a selected attribute. The selected attribute in HTML is used to specify which option should be by default selected when the page loads. This is a boolean attribute. The option that is having the selected attribute will be displayed by default.
Note: If an option is selected by default, it is displayed first in the drop-down list.
Syntax:
- It is used to return the Property.
optionObject.defaultSelected
Return Value: It returns a Boolean value which represents that the option is selected by default or not.
Example: This Example illustrate how to return the defaultSelected property.
<!DOCTYPE html> < html >
< head >
< title >DOM option defaultSelected Property</ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h2 >DOM defaultSelected Property</ h2 >
<!-- List of Options -->
< select id = "GFG" >
< option value = "merge" >Merge Sort</ option >
< option value = "bubble" >Bubble Sort</ option >
< option value = "insertion" >Insertion Sort</ option >
<!-- Option element with selected attribute -->
< option value = "quick" selected>Quick Sort</ option >
</ select >< br >< br >
< button onclick = "myGeeks()" >Submit</ button >
< p id = "sudo" style = "font-size:20px;color:green;" ></ p >
< script >
function myGeeks() {
var x = document.getElementById("GFG").selectedIndex;
var y = document.getElementsByTagName("option");
document.getElementById("sudo").innerHTML =
"Is " + y[x].text + " selected by default? "
+ "< br >" + "yes It's " + y[x].defaultSelected;
} </ script >
</ body >
</ html >
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Option defaultSelected Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari