HTML | DOM Select Object
Last Updated :
13 Feb, 2019
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:
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 >
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 >
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
Share your thoughts in the comments
Please Login to comment...