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 value Property
The HTML DOM select value property is used to get or set the value of the selected option in a dropdown list. This property returns the value of the currently selected option or allows you to programmatically select an option by setting its value.
Syntax
Following is the syntax for returning the selected value −
selectObject.value
Following is the syntax for setting the selected value −
selectObject.value = "optionValue"
Return Value
The property returns a string representing the value of the currently selected option. If no value attribute is specified for the option, it returns the text content of the selected option.
Getting the Selected Value
Example
Following example demonstrates how to get the selected value from a dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>Select Value Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Select Your Favorite Subject</h2>
<select id="subjects" style="padding: 8px; font-size: 16px;">
<option value="phy">Physics</option>
<option value="math">Mathematics</option>
<option value="chem">Chemistry</option>
<option value="eng">English</option>
</select>
<button onclick="showValue()" style="margin-left: 10px; padding: 8px 16px;">Show Value</button>
<p id="result" style="font-weight: bold; color: #2c3e50; margin-top: 20px;"></p>
<script>
function showValue() {
var selectElement = document.getElementById("subjects");
var selectedValue = selectElement.value;
document.getElementById("result").innerHTML = "Selected Value: " + selectedValue;
}
</script>
</body>
</html>
The output displays the value attribute of the selected option −
Select Your Favorite Subject [Physics ?] [Show Value] Selected Value: phy
Setting the Selected Value
You can programmatically select an option by setting the value property to match the value attribute of the desired option.
Example
Following example shows how to set the selected value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Select Value Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Programming Languages</h2>
<select id="languages" style="padding: 8px; font-size: 16px;">
<option value="js">JavaScript</option>
<option value="py">Python</option>
<option value="java">Java</option>
<option value="cpp">C++</option>
</select>
<div style="margin-top: 15px;">
<button onclick="selectPython()" style="margin: 5px; padding: 8px 12px;">Select Python</button>
<button onclick="selectJava()" style="margin: 5px; padding: 8px 12px;">Select Java</button>
</div>
<p id="current" style="font-weight: bold; color: #27ae60; margin-top: 20px;"></p>
<script>
function selectPython() {
document.getElementById("languages").value = "py";
updateDisplay();
}
function selectJava() {
document.getElementById("languages").value = "java";
updateDisplay();
}
function updateDisplay() {
var select = document.getElementById("languages");
var selectedText = select.options[select.selectedIndex].text;
document.getElementById("current").innerHTML = "Currently Selected: " + selectedText;
}
// Show initial selection
updateDisplay();
</script>
</body>
</html>
The buttons programmatically change the selected option −
Programming Languages [JavaScript ?] [Select Python] [Select Java] Currently Selected: JavaScript
Options Without Value Attributes
When an option does not have a value attribute, the select value property returns the text content of the option.
Example
Following example demonstrates behavior with options that have no value attributes −
<!DOCTYPE html>
<html>
<head>
<title>Select Value - No Value Attributes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Choose a Color</h2>
<select id="colors" onchange="displaySelection()" style="padding: 8px; font-size: 16px;">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<p id="output" style="font-weight: bold; color: #8e44ad; margin-top: 20px;">Selected: Red</p>
<script>
function displaySelection() {
var colorSelect = document.getElementById("colors");
document.getElementById("output").innerHTML = "Selected: " + colorSelect.value;
}
</script>
</body>
</html>
Since options have no value attributes, the property returns the text content −
Choose a Color [Red ?] Selected: Red
Comparison of Value vs Text
Following table shows the difference between the value property and getting the text of the selected option −
| Method | Returns | Usage |
|---|---|---|
select.value |
The value attribute of selected option, or text if no value attribute | Getting/setting the selected option programmatically |
select.options[select.selectedIndex].text |
The visible text content of the selected option | Displaying the human-readable selected option |
select.selectedIndex |
The index (0-based) of the selected option | Working with option positions |
Conclusion
The HTML DOM select value property provides an efficient way to get or set the selected option in a dropdown list. It returns the value attribute of the selected option, or the text content if no value attribute exists. This property is essential for form handling and dynamic user interface interactions.
315 Views
