HTML | DOM Option selected Property
The Option selected Property in HTML DOM is used for setting or returning the value of the selected state of an <option> Element. This is a Boolean Attribute.
Syntax:
- It return the selected property.
optionObject.selected
- It sets the selected property.
optionObject.selected = true|false
Property Values: It contains a Boolean value which specifies that Whether the option would be selected or not.
- true: It specifies the option is selected.
- false: It has a Default value. An option would not be selected.
Return Value: It returns a Boolean value which represents that the option would be selected or not.
Example-1: This Example returns an Option selected Property.
<!DOCTYPE html><html> <head> <title> DOM option Selected Property </title> <style> body { text-align: center; } h1 { color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>DOM option Selected Property</h2> <form id="myGeeks"> <select id="GFG"> <option id="sudo"> Choose an option </option> <option value="html"> HTML </option> <option value="java"> JAVA </option> <option value="C++"> C++ </option> <option value="php"> PHP </option> <option value="perl" selected> PERL </option> </select> </form> <br> <br> <br> <br> <br> <br> <br> <button onclick="myGeeks()"> Submit </button> <h3 id="demo"></h3> <script> function myGeeks() { var x = document.getElementById( "sudo").selected; document.getElementById( "demo").innerHTML = x; } </script> </body> </html> |
Before Clicking on Button:
After Clicking On Button:
Example-2: This Example sets the Option Selected Property.
<!DOCTYPE html><html> <head> <title> DOM option Selected Property </title> <style> body { text-align: center; } h1 { color: green; } </style></head> <body> <h1>GeeksforGeeks</h1> <h2>DOM option Selected Property</h2> <form id="myGeeks"> <select id="GFG"> <option id="sudo"> Choose an option </option> <option value="html"> HTML </option> <option value="java"> JAVA </option> <option value="C++"> C++ </option> <option value="php"> PHP </option> <option value="perl" selected> PERL </option> </select> </form> <br> <br> <br> <br> <br> <br> <br> <button onclick="myGeeks()"> Submit </button> <h3 id="demo"></h3> <script> function myGeeks() { var x = document.getElementById( "sudo").selected = true; document.getElementById( "demo").innerHTML = x; } </script> </body> </html> |
Before Clicking on Button:
After Clicking On Button:
Supported Browsers: The browsers supported by DOM Option selected Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Please Login to comment...