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 Option index Property
The HTML DOM Option index property returns or sets the index position of an option element within a <select> 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 index of an option −
optionObject.index
Following is the syntax for setting the index of an option −
optionObject.index = number
Return Value
The index property returns a number representing the zero-based index position of the option element in the options collection. If the option is not part of a select element, it returns 0.
Getting Option Index
You can retrieve the index of a selected option using the selectedIndex property of the select element, or directly access the index property of a specific option element.
Example
Following example demonstrates how to get the index of the selected option −
<!DOCTYPE html>
<html>
<head>
<title>Option Index Property</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>
</select>
<p id="result">Selected option index: 0</p>
<script>
function showIndex() {
var select = document.getElementById("subjects");
var selectedOption = select.options[select.selectedIndex];
document.getElementById("result").innerHTML =
"Selected option index: " + selectedOption.index +
" (Option: " + selectedOption.text + ")";
}
</script>
</body>
</html>
The output shows the index of the currently selected option. When you change the selection, the index updates accordingly −
Select Your Favorite Subject Physics ? Selected option index: 0 (Option: Physics) (Selecting "Chemistry" shows: Selected option index: 2 (Option: Chemistry))
Setting Option Index
You can programmatically change an option's position by setting its index property. This moves the option to a new position within the select element.
Example
Following example shows how to change the index position of an option −
<!DOCTYPE html>
<html>
<head>
<title>Modifying Option Index</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Reorder Options</h2>
<select id="courses">
<option>HTML</option>
<option>CSS</option>
<option id="jsOption">JavaScript</option>
<option>Python</option>
</select>
<br><br>
<button onclick="moveJavaScript()">Move JavaScript to First Position</button>
<p id="status"></p>
<script>
function moveJavaScript() {
var jsOption = document.getElementById("jsOption");
var originalIndex = jsOption.index;
jsOption.index = 0;
document.getElementById("status").innerHTML =
"JavaScript moved from index " + originalIndex + " to index " + jsOption.index;
}
</script>
</body>
</html>
Before clicking the button, JavaScript is at index 2. After clicking, it moves to index 0 (first position) −
Reorder Options HTML ? [Move JavaScript to First Position] (After clicking: JavaScript moves to first position in dropdown) JavaScript moved from index 2 to index 0
Working with Multiple Options
You can iterate through all options in a select element and access their index values to perform batch operations or display information about all options.
Example
Following example displays the index and text of all options −
<!DOCTYPE html>
<html>
<head>
<title>All Option Indexes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<select id="languages">
<option>Java</option>
<option>Python</option>
<option>C++</option>
<option>Ruby</option>
</select>
<br><br>
<button onclick="listAllIndexes()">Show All Option Indexes</button>
<div id="optionList"></div>
<script>
function listAllIndexes() {
var select = document.getElementById("languages");
var output = "<h3>Option Index Information:</h3><ul>";
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
output += "<li>Index: " + option.index + " - Text: " + option.text + "</li>";
}
output += "</ul>";
document.getElementById("optionList").innerHTML = output;
}
</script>
</body>
</html>
The output lists all options with their corresponding index values −
Programming Languages Java ? [Show All Option Indexes] Option Index Information: ? Index: 0 - Text: Java ? Index: 1 - Text: Python ? Index: 2 - Text: C++ ? Index: 3 - Text: Ruby
Browser Compatibility
The Option index property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML DOM Level 1 specification and has been widely supported since early browser versions.
Conclusion
The HTML DOM Option index property provides a simple way to determine or modify the position of option elements within a select dropdown. It returns a zero-based index value and can be used to programmatically reorder options or track their positions for dynamic form interactions.
185 Views
