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:

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>                                                             