HTML DOM Select Object

Last Updated : 03 Oct, 2024

The Select object in HTML DOM is used to represent an HTML <select> element. It provides properties and methods to manipulate the <select> element and its associated <option> elements.

Syntax:

To create <select> element.
```
document.createElement("SELECT")
```
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.

Example 1: This example create the <select> element by using document.createElement() method.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Select Object
    </title>
</head>

<body>
    <h2>
        HTML DOM Select Object
    </h2>

    <p>
        Click on button to create select
        and option element
    </p>

    <button id="btn" onclick="myGeeks()">
        Create Select Element
    </button>

    <!-- script to create select element -->
    <script>
        function myGeeks() {
            let sel = document.createElement("Select");
            sel.setAttribute("id", "MySelect");
            document.body.appendChild(sel);

            let opt = document.createElement("option");
            opt.setAttribute("value", "Banana");
            let nod = document.createTextNode("Banana");
            opt.appendChild(nod);
            document.getElementById("MySelect").appendChild(opt);

            let opt1 = document.createElement("option");
            opt1.setAttribute("value", "Apple");
            let nod1 = document.createTextNode("Apple");
            opt1.appendChild(nod1);
            document.getElementById("MySelect").appendChild(opt1);

            document.getElementById("btn").disabled=true;
        }
    </script>
</body>

</html>

Output:

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

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Select Object
    </title>
</head>

<body>
    <h2>HTML DOM Select Object</h2>
    <select id="GFG">
        <option>JavaScript</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>TypeScript</option>
    </select>

    <p>
        Click on button to get the number
        of option elements in dropdown.
    </p>

    <button onclick="myGeeks()">
        Button
    </button>

    <p id="test"></p>

    <!-- script to count select element -->
    <script>
        function myGeeks() {
            let len = document.getElementById("GFG").length;
            document.getElementById("test").innerHTML = len;
        }
    </script>
</body>

</html>

Output:

Supported Browsers:

The browser supported by DOM Select Object are listed below:

Opera
Google Chrome
Firefox
Apple Safari

HTML | DOM TouchEvent touches Property

Shubrodeep Banerjee

Improve

Article Tags :

HTML DOM Select Object

Syntax:

Select Object Properties:

Select Object Methods:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?