Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Select Object
The HTML DOM select object represents the <select> element in an HTML document. This object provides properties and methods to dynamically create, manipulate, and interact with dropdown lists using JavaScript.
Syntax
To create a new select element using JavaScript −
document.createElement("SELECT");
To access an existing select element −
document.getElementById("selectId");
document.getElementsByTagName("select")[0];
document.querySelector("select");
Properties
Following are the key properties of the select object −
| Property | Description |
|---|---|
| autofocus | Returns or sets whether the dropdown should automatically get focus when the page loads. |
| disabled | Returns or sets whether the dropdown is disabled. |
| form | Returns a reference to the form that contains the dropdown. |
| length | Returns the number of <option> elements in the dropdown. |
| multiple | Returns or sets whether multiple options can be selected. |
| name | Returns or sets the value of the name attribute. |
| selectedIndex | Returns or sets the index of the selected option. |
| size | Returns or sets the number of visible options in the dropdown. |
| type | Returns the type of the form element ("select-one" or "select-multiple"). |
| value | Returns or sets the value of the selected option. |
Methods
Following are the main methods available for the select object −
| Method | Description |
|---|---|
| add(option, index) | Adds a new option element to the dropdown at the specified index. |
| remove(index) | Removes the option element at the specified index. |
| checkValidity() | Checks whether the dropdown satisfies its constraints (returns true/false). |
Creating a Select Object
Following example demonstrates how to create a dropdown list dynamically using the DOM select object −
<!DOCTYPE html>
<html>
<head>
<title>Creating Select Object</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>DOM Select Object Demo</h1>
<button onclick="createDropDownList()" style="padding: 10px 20px; margin: 10px;">Create Dropdown List</button>
<div id="container"></div>
<script>
function createDropDownList() {
var dropDown = document.createElement("SELECT");
dropDown.innerHTML = "<option>CAKE</option><option>PIZZA</option><option>BURGER</option>";
dropDown.style.padding = "5px";
dropDown.style.margin = "10px";
document.getElementById("container").appendChild(dropDown);
}
</script>
</body>
</html>
The output shows a button that creates a dropdown list when clicked −
DOM Select Object Demo [Create Dropdown List] (After clicking, a dropdown with CAKE, PIZZA, BURGER options appears)
Accessing Select Properties
Following example shows how to access and manipulate various properties of a select object −
<!DOCTYPE html>
<html>
<head>
<title>Select Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Language</h2>
<select id="languages" name="prog_lang">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<button onclick="showProperties()">Show Properties</button>
<p id="output"></p>
<script>
function showProperties() {
var select = document.getElementById("languages");
var output = document.getElementById("output");
output.innerHTML =
"<b>Length:</b> " + select.length + "<br>" +
"<b>Selected Index:</b> " + select.selectedIndex + "<br>" +
"<b>Selected Value:</b> " + select.value + "<br>" +
"<b>Name:</b> " + select.name + "<br>" +
"<b>Type:</b> " + select.type;
}
</script>
</body>
</html>
Selecting an option and clicking the button displays the select object's properties −
Select Your Favorite Language [HTML dropdown with options] [Show Properties] Length: 4 Selected Index: 2 (if JavaScript is selected) Selected Value: javascript Name: prog_lang Type: select-one
Using Select Methods
Following example demonstrates the add() and remove() methods −
<!DOCTYPE html>
<html>
<head>
<title>Select Object Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Select Manipulation</h2>
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<br><br>
<button onclick="addOption()">Add Orange</button>
<button onclick="removeOption()">Remove Last</button>
<button onclick="checkValidity()">Check Validity</button>
<p id="status"></p>
<script>
function addOption() {
var select = document.getElementById("fruits");
var option = new Option("Orange", "orange");
select.add(option);
document.getElementById("status").innerHTML = "Orange added!";
}
function removeOption() {
var select = document.getElementById("fruits");
if (select.length > 0) {
select.remove(select.length - 1);
document.getElementById("status").innerHTML = "Last option removed!";
}
}
function checkValidity() {
var select = document.getElementById("fruits");
var isValid = select.checkValidity();
document.getElementById("status").innerHTML = "Valid: " + isValid;
}
</script>
</body>
</html>
The buttons allow dynamic addition and removal of options, plus validity checking −
Dynamic Select Manipulation [Apple/Banana dropdown] [Add Orange] [Remove Last] [Check Validity] (Status messages appear based on button clicks)
Conclusion
The HTML DOM select object provides comprehensive control over dropdown lists through its properties like selectedIndex, value, and length, and methods like add() and remove(). This enables dynamic creation and manipulation of select elements for interactive web applications.
325 Views
