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 display the selected option in a dropdown list with JavaScript?
In this tutorial, we will learn how to display the selected option in a dropdown list with JavaScript.
A dropdown list is a switchable menu that enables users to select one item from various options. It's created using the <select></select> tag and is commonly used in forms to gather user input.
The DOM API functions getElementById() and querySelector() can be used to access a <select> element and retrieve its selected value. Let's explore the different methods to display the selected option.
Using selectedIndex Property
The selectedIndex property returns the index of the currently selected option in the dropdown list. This index starts at 0, and returns -1 if no option is selected.
Syntax
selectElement[selectElement.selectedIndex].value selectElement[selectElement.selectedIndex].text
Example
In this example, we use the onchange event to detect when the user selects an option. The function displays the selected index, value, and text content.
<html>
<head>
<title>Display Selected Option using selectedIndex</title>
</head>
<body>
<h2>Using the selectedIndex property</h2>
<form name="dropForm">
<select name="dropSelect" onchange="showDropInfo()">
<option value="">Select an option:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="selectedIndex"></p>
<p id="selectedValue"></p>
<p id="selectedText"></p>
<script>
function showDropInfo() {
var selectElement = document.forms.dropForm.dropSelect;
var indexElement = document.getElementById('selectedIndex');
var valueElement = document.getElementById('selectedValue');
var textElement = document.getElementById('selectedText');
indexElement.innerHTML = 'Selected option index: ' + selectElement.selectedIndex;
valueElement.innerHTML = 'Selected value: ' + selectElement[selectElement.selectedIndex].value;
textElement.innerHTML = 'Selected text: ' + selectElement[selectElement.selectedIndex].text;
}
</script>
</body>
</html>
Using the value Property
The value property directly returns the value of the currently selected option. This is simpler than using selectedIndex when you only need the value.
Syntax
selectElement.value
Example
This example demonstrates how to get the selected value using a button click event with querySelector().
<html>
<body>
<h2>Using the value property</h2>
<p>Select a color:
<select id="colorSelect">
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</p>
<p>Selected option value: <span class="output"></span></p>
<button onclick="getSelectedOption()">Get Selected Value</button>
<script>
function getSelectedOption() {
var selectElement = document.querySelector('#colorSelect');
var selectedValue = selectElement.value;
document.querySelector('.output').textContent = selectedValue;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Returns | Use Case | Complexity |
|---|---|---|---|
selectedIndex |
Index, value, and text | When you need detailed option info | More complex |
value |
Value only | When you only need the value | Simple |
Key Points
- Use
selectedIndexwhen you need the index position or text content of the selected option - Use
valueproperty for simpler cases where you only need the option's value - Both methods work with
getElementById()andquerySelector() - The
onchangeevent is useful for real-time detection of selection changes
Conclusion
Both selectedIndex and value properties are effective for retrieving selected dropdown options. Use value for simplicity when you only need the option's value, and selectedIndex when you need additional details about the selected option.
33K+ Views
