HTML | DOM Select Object
The Select object in HTML DOM is used to represent an HTML <select> element. The <select> element can be created by using the document.createElement() method and it can be accessed using the getElementById().
Syntax:
- It is used to create <select> element.
document.createElement("SELECT") - It is used to access <select> element.
document.getElementById("mySelect")
Select Object Properties:
- autofocus: It is used to set or return the drop-down list automatically get focused when the page loads.
- disabled: It is used to set or return whether the drop-down list is disabled, or not.
- form: It returns the reference to the form that contains the drop-down list.
- length:It returns the number of <option> elements in a drop-down list.
- multiple: It is used to set or return whether more than one option can be selected from the drop-down list.
- name: It is used to set or return the value of the name attribute of a drop-down list.
- selectedIndex: It is used to set or return the index of selected option in a drop-down list.
- size: It is used to set or return the value of the size of a drop-down list.
- type: It returns the type of form element a drop-down list.
- value:It is used to set or return the value of selected option in a drop-down list.
Select Object Methods:
- add(): It is used to add an option to a drop-down list.
- checkValidity(): It is used to check the validity of a drop-down list.
- remove(): It is used to remove an option from a drop-down list.
Select Object Collections:
- options: It returns the collection of all the options in a drop-down list.
Below programs illustrate the Select Object in HTML DOM:
Example 1: This example create the <select> element by using document.createElement() method.
<!DOCTYPE html> <html> <head> <title> HTML DOM Select Object </title> </head> <body> <h1>GeeksforGeeks</h1> <h2>HTML DOM Select Object</h2> <p> Click on button to create select and option element </p> <button onclick = "myGeeks()"> Create Select Element </button> <!-- script to create select element --> <script> function myGeeks() { var sel = document.createElement("Select"); sel.setAttribute("id", "MySelect"); document.body.appendChild(sel); var opt = document.createElement("option"); opt.setAttribute("value", "gfg"); var nod = document.createTextNode("gfg"); opt.appendChild(nod); document.getElementById("MySelect").appendChild(opt); } </script> </body> </html> |
Output:
Before Click on the button:
After click on the button:
Example 2: This example access the <select> element by using getElementById() method.
<!DOCTYPE html> <html> <head> <title> HTML DOM Select Object </title> </head> <body> <h1>GeeksforGeeks</h1> <h2>HTML DOM Select Object</h2> <select id="GFG"> <option>Fork Python</option> <option>Fork Java</option> <option>Fork CPP</option> <option>Sudo Placement</option> </select> <p> Click on button to get the number of option elements </p> <button onclick = "myGeeks()"> Create Select Element </button> <p id="test"></p> <!-- script to count select element --> <script> function myGeeks() { var len = document.getElementById("GFG").length; document.getElementById("test").innerHTML = len; } </script> </body> </html> |
Output:
Before Click on the button:
After click on the button:
Supported Browsers: The browser supported by DOM Select Object are listed below:
- Opera
- Internet Explorer
- Google Chrome
- Firefox
- Apple Safari
Please Login to comment...