The HTML DOM select Object represent the <select> element of an HTML document.
Let’s see how to create select object
Syntax
Following is the syntax −
document.createElement(“SELECT”);
Properties
Following are the properties of select Object −
Property | Explanation |
---|---|
autofocus | It returns and modify whether the drop-down list should get focused or not when page load. |
disabled | It returns and modify whether the drop-down list is disabled or not. |
length | It returns the number of |
form | It returns the reference of the form that contain the drop-down list in the HTML document. |
multiple | It returns and modify whether multiple options can be selected from a drop-down list or not. |
name | It returns and alter the value of the name attribute of drop-down list. |
size | It returns and alter the value of the size attribute of drop-down list. |
type | It returns the value of the type attribute of drop-down list. |
value | It returns and modify the content of the value attribute of drop-down list. |
selectedIndex | It returns and modify the index of selected option of the drop-down list in an HTML document. |
Methods
Following are the methods −
Method | Explanation |
---|---|
add() | It adds a new option to a drop-down list in an HTML document. |
remove() | It deletes a new option from a drop-down list in an HTML document. |
checkValidity() | It checks the validity of a drop-down list in an HTML document. |
Example
Let us see an example of HTML DOM select object −
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; background-color:#fff; color:#0197F6; } h1{ color:#23CE6B; } .btn{ background-color:#fff; border:1.5px dashed #0197F6; height:2rem; border-radius:2px; width:60%; margin:2rem auto; display:block; color:#0197F6; outline:none; cursor:pointer; } </style> </head> <body> <h1>DOM select Object Demo</h1> <button onclick="createDropDownList()" class="btn">Create a drop-down list</button> <script> function createDropDownList() { var dropDown = document.createElement("SELECT"); dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>"; document.body.appendChild(dropDown); } </script> </body> </html>
This will produce the following output −
Click on “Create a drop-down listCreate a drop-down list” button to create a drop-down list.