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
How to show the index of the selected option in a dropdown list with JavaScript?
In JavaScript, we use the selectedIndex property to get the index of the selected option in a dropdown list. This property returns a zero-based index value that indicates which option is currently selected.
Dropdown lists are an essential part of user interfaces, allowing users to select one or multiple options from a predefined list. Understanding how to retrieve the selected option's index is crucial for form handling and user interaction.
Using the selectedIndex Property
The selectedIndex property is part of the DOM and contains the index of the currently selected option in a dropdown list. The indexing is 0-based, meaning the first option has index 0.
Syntax
var index = document.getElementById("dropDownListId").selectedIndex;
Example 1: Getting Selected Index
In this example, we create a Windows version dropdown and display the selected option's index when the user clicks the submit button.
<!DOCTYPE html>
<html>
<body>
<p>Which Windows version do you use?</p><br>
<form id="myForm">
<select id="selectNow">
<option>Windows 11</option>
<option>Windows 10</option>
<option>Windows 8</option>
<option>Windows 7</option>
<option>Windows Vista</option>
<option>Windows XP</option>
<option>Windows 2000</option>
<option>Windows 98</option>
</select>
<input type="button" onclick="display()" value="Submit">
</form>
<p>Select an option and click the button to get the index.</p>
<div id="result"></div>
<script>
function display() {
var index = document.getElementById("selectNow").selectedIndex;
document.getElementById("result").innerHTML = "The selected index is: " + index;
}
</script>
</body>
</html>
Getting Selected Value
Besides the index, you can also extract the actual value of the selected option using the value property:
var value = document.getElementById("dropDownListId").value;
Example 2: Getting Selected Value
This example demonstrates how to retrieve the selected option's value instead of its index.
<!DOCTYPE html>
<html>
<body>
<p>Which Windows version do you use?</p><br>
<form id="myForm">
<select id="selectNow">
<option>Windows 11</option>
<option>Windows 10</option>
<option>Windows 8</option>
<option>Windows 7</option>
<option>Windows Vista</option>
<option>Windows XP</option>
<option>Windows 2000</option>
<option>Windows 98</option>
</select>
<input type="button" onclick="display()" value="Submit">
</form>
<p>Select an option and click the button to get the value.</p>
<div id="result"></div>
<script>
function display() {
var selectElement = document.getElementById("selectNow");
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "The selected option is: " + selectElement.value;
}
</script>
</body>
</html>
Handling Multiple Selections
For dropdown lists that allow multiple selections, selectedIndex only returns the index of the first selected option. To handle multiple selections, we need to iterate through all options and check their selected property.
Example 3: Multiple Selection Dropdown
This example shows how to get all selected options from a multi-select dropdown.
<!DOCTYPE html>
<html>
<body>
<p>Which Windows versions do you use?</p>
<p>You can select multiple options (hold Ctrl).</p>
<form id="myForm">
<select id="selectNow" multiple>
<option>Windows 11</option>
<option>Windows 10</option>
<option>Windows 8</option>
<option>Windows 7</option>
<option>Windows Vista</option>
<option>Windows XP</option>
<option>Windows 2000</option>
<option>Windows 98</option>
</select>
<input type="button" onclick="display()" value="Submit">
</form>
<p>The selected options are:</p>
<div id="result"></div>
<script>
function display() {
var options = document.getElementById("selectNow").options;
var text = "";
for (let option of options) {
if (option.selected) {
text += option.value + "<br>";
}
}
document.getElementById("result").innerHTML = text || "No options selected";
}
</script>
</body>
</html>
Key Points
- If no option is selected,
selectedIndexreturns -1 - The first option has index 0 (zero-based indexing)
- For multi-select dropdowns,
selectedIndexonly returns the first selected option's index - Use the
optionscollection andselectedproperty for handling multiple selections
Conclusion
The selectedIndex property is essential for handling dropdown selections in JavaScript. While it works perfectly for single-select dropdowns, use the options collection for multi-select scenarios to capture all selected values.
12K+ Views
