HTML | DOM OptionGroup Object
The OptionGroup Object in HTML DOM is used to represent the HTML <optgroup> element. The <optgroup> element can be accessed by using getElementById() method.
Property Values: This object contains two property values which are listed below:
- disabled: It is used to set or return whether option-group element is disabled, or not.
- label: It is used to set or return the value the label attribute of an option-group element.
Syntax:
document.getElementById("ID");
Where ID is assigned to the <optgroup> element.
Example 1:
<!DOCTYPE html> <html> <head> <title> HTML DOM Optgroup Object </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksforGeeks </h1> <div> A computer science portal for geeks </div> <h2>DOM OptionGroup Object</h2> <select> <optgroup id = "GFG" label = "Programming Languages"> <option value = "C">C</option> <option value = "C++">C++</option> <option value = "Java">Java</optgroup> </select> <br><br> <button onclick = "Geeks()"> Submit </button> <p id = "sudo"></p> <script> function Geeks() { var txt = document.getElementById("GFG").label; document.getElementById("sudo").innerHTML = txt; } </script> </body> </html> |
Output:
before Click on the Button:
After Click on the Button:
Example 2: OptionGroup Object can be created by using the document.createElement Method.
<!DOCTYPE html> <html> <head> <title> HTML DOM Optgroup Object </title> </head> <body> <h2>GeeksforGeeks</h1> <h2>DOM OptionGroup Object</h2> <select id = "GFG"> <option value = "C">C</option> <option value = "C++">C++</option> <option value = "Java">Java</optgroup> </select> <br><br> <button onclick = "Geeks()"> Submit </button> <script> function Geeks() { var g = document.getElementById("GFG"); var f = document.createElement("OPTGROUP"); f.setAttribute("label", "Object Oriented Programming"); f.appendChild(g.options[1]); g.insertBefore(f, g.options[1]); } </script> </body> </html> |
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM OptionGroup Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...