Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                                           

chevron_right


Output:
Before Click on the button:

After click on the button:

Example 2: This example access the <select> element by using getElementById() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                                            

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :