HTML DOM Select options Collection
The Select Options Collection in HTML DOM is used to set or return the collection of all options elements in a Drop-Down list. The elements are presented in a sorted order as they appear in a Source Code.
Syntax:
selectObject.options
Properties:
- length: It is a read-only property that returns a number of option elements in the Drop-Down list.
Methods: The DOM select option collection contains five methods which are given below:
- [index]: It returns the element with the selected index specified in the parameter. It starts from 0 and returns NULL if the index value is out of range.
- item(index): It returns the element of the selected index. The index starts from 0 and returns NULL if the index value is out of range.
- namedItem(id): It returns the element with a given id attribute and returns a NULL value if the specified id is not verified.
- [add(option[,index])]: It is used to add a options value in the collection at a particular index.
- remove(index): It is used to remove the option value at the specified index from the collections.
Example 1: Below HTML code used to return the number of options in a drop-down list.
HTML
<!DOCTYPE html><html> <body> <center> <h1 style="color:green;font-size:39px;"> GeeksForGeeks </h1> <h2>DOM Select Option Collection</h2> <label>Your favourite Food Dish: </label> <select id="dish"> <option>rajma rice</option> <option>Idli sambhar </option> <option>Samosa</option> <option>Daal rice</option> <option> shahi paneer </option> </select> <br> <button onclick="myGeeks()">Submit</button> <p id="sudo" style="font-size:20px;color:green;"></p> <script> function myGeeks() { var g = document.getElementById( "dish").options.length; document.getElementById("sudo") .innerHTML = "The are " + g + " options in the drop-down list"; } </script> </center></body> </html> |
Output:
Example 2: Below HTML code used to get a value of the options which is at 2nd options.
HTML
<!DOCTYPE html><html> <body> <center> <h1 style="color:green;font-size:39px;"> GeeksForGeeks </h1> <h2>DOM Select Option Collection</h2> <label>Your favourite Food Dish: </label> <select id="dish"> <option>rajma rice</option> <option>Idli sambhar </option> <option>Samosa</option> <option>Daal rice</option> <option> shahi paneer </option> </select> <br> <button onclick="myGeeks()">Submit</button> <p id="sudo" style="font-size:20px;color:green;"></p> <script> function myGeeks() { var g = document.getElementById( "dish").options[1].text; document.getElementById("sudo").innerHTML = "The second options is :" + g; } </script> </center></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...