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 selectedIndex Property
The HTML DOM select selectedIndex property returns and modifies the index of the selected option in a dropdown list. The index is zero-based, meaning the first option has an index of 0, the second option has an index of 1, and so on.
Syntax
Following is the syntax for returning the selectedIndex −
object.selectedIndex
Following is the syntax for modifying the selectedIndex −
object.selectedIndex = number
Return Value
The selectedIndex property returns an integer representing the index of the selected option. If no option is selected, it returns -1.
Example − Reading selectedIndex
Following example demonstrates how to read the selectedIndex property −
<!DOCTYPE html>
<html>
<head>
<title>Reading selectedIndex</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Subject</h2>
<select id="subjects" onchange="showIndex()">
<option>Physics</option>
<option>Mathematics</option>
<option>Chemistry</option>
<option>English</option>
<option>Biology</option>
</select>
<p id="result">Selected index: 0</p>
<script>
function showIndex() {
var dropdown = document.getElementById("subjects");
var index = dropdown.selectedIndex;
var option = dropdown.options[index].text;
document.getElementById("result").innerHTML =
"Selected index: " + index + " (Option: " + option + ")";
}
</script>
</body>
</html>
The output shows the currently selected index and option text −
Select Your Favorite Subject Physics [dropdown] Selected index: 0 (Option: Physics)
Example − Setting selectedIndex
Following example demonstrates how to programmatically set the selectedIndex property −
<!DOCTYPE html>
<html>
<head>
<title>Setting selectedIndex</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<select id="courses">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Python</option>
<option>Java</option>
</select>
<div style="margin: 15px 0;">
<button onclick="setIndex(0)">Select HTML</button>
<button onclick="setIndex(2)">Select JavaScript</button>
<button onclick="setIndex(4)">Select Java</button>
</div>
<p id="display">Current selection: HTML (index 0)</p>
<script>
function setIndex(index) {
var dropdown = document.getElementById("courses");
dropdown.selectedIndex = index;
var selectedOption = dropdown.options[index].text;
document.getElementById("display").innerHTML =
"Current selection: " + selectedOption + " (index " + index + ")";
}
</script>
</body>
</html>
Clicking the buttons changes the selected option in the dropdown −
Course Selection HTML [dropdown] [Select HTML] [Select JavaScript] [Select Java] Current selection: HTML (index 0)
Example − Dynamic Option Management
Following example shows how selectedIndex works with dynamically added options −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic selectedIndex</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Dropdown Management</h2>
<select id="dynamicList" style="width: 200px;">
<option>Option 1</option>
<option>Option 2</option>
</select>
<div style="margin: 15px 0;">
<button onclick="addOption()">Add Option</button>
<button onclick="selectLast()">Select Last</button>
<button onclick="getInfo()">Get Info</button>
</div>
<p id="info">Total options: 2, Selected index: 0</p>
<script>
var optionCount = 2;
function addOption() {
var dropdown = document.getElementById("dynamicList");
var newOption = document.createElement("option");
optionCount++;
newOption.text = "Option " + optionCount;
dropdown.add(newOption);
getInfo();
}
function selectLast() {
var dropdown = document.getElementById("dynamicList");
dropdown.selectedIndex = dropdown.options.length - 1;
getInfo();
}
function getInfo() {
var dropdown = document.getElementById("dynamicList");
var totalOptions = dropdown.options.length;
var selectedIndex = dropdown.selectedIndex;
var selectedText = dropdown.options[selectedIndex].text;
document.getElementById("info").innerHTML =
"Total options: " + totalOptions +
", Selected index: " + selectedIndex +
" (" + selectedText + ")";
}
</script>
</body>
</html>
The example demonstrates adding options and managing the selectedIndex dynamically −
Dynamic Dropdown Management Option 1 [dropdown] [Add Option] [Select Last] [Get Info] Total options: 2, Selected index: 0 (Option 1)
Key Points
-
The selectedIndex property is zero-based, starting from 0 for the first option.
-
Setting selectedIndex to
-1deselects all options in the dropdown. -
If you set selectedIndex to a value greater than the number of options, no option will be selected.
-
The property works with both
<select>elements and<select multiple>elements. -
When no option is selected, selectedIndex returns
-1.
Conclusion
The selectedIndex property provides a simple way to get or set the selected option in a dropdown list using its zero-based index. It is particularly useful for form validation, dynamic content updates, and programmatically controlling user selections. Remember that the index starts from 0 and returns -1 when no option is selected.
232 Views
