HTML | DOM Option Object
The DOM Option Object is used to represent the HTML <option> element. The Option element is accessed by getElementById().
Properties:
- disabled: This attribute contains the value disabled which represents option is disabled.
- label: This attribute contains the text value which represents the shorted label for the option.
- selected: This attribute contains the value selected which represents the item is pre-selected when the browser loaded.
- value: This attribute contains the value text which sent to the server.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “Option” tag.
Example-1:
<!DOCTYPE html> <html> <head> <title> DOM Option Object</title> <style> body { text-align: center; } h1 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>DOM Option Object</h2> <select> <option>Choose an option</option> <!-- Assigning id to option tag. --> <option id="GFG" value="html">HTML</option> <option value="java">JAVA</option> <option value="C++">C++</option> <option value="php">PHP</option> <option value="perl">PERL</option> </select> <br> <br> <button onclick="geeks()">Submit</button> <p id="sudo"></p> <script> function geeks() { // Accessing option object. var g = document.getElementById( "GFG").text; document.getElementById("sudo").innerHTML = g; } </script> </body> </html> |
:
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: Option Object can be created by using the document.createElement Method.
<!DOCTYPE html> <html> <head> <title> DOM Option Object</title> <style> body { text-align: center; } h1 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>DOM Option Object</h2> <select id="GFG"> </select> <br> <br> <button onclick="geeks()">Submit</button> <p id="sudo"></p> <script> function geeks() { // Creating option object. var g = document.createElement("OPTION"); var f = document.createTextNode( "Choose an Option"); g.appendChild(f); document.getElementById("GFG").appendChild(g); var x = document.createElement("OPTION"); x.setAttribute("value", "HTML"); var t = document.createTextNode("html"); x.appendChild(t); document.getElementById("GFG").appendChild(x); } </script> </body> </html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Option Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...