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 value Property
The HTML DOM option value property allows you to get or set the value of an <option> element within a <select> dropdown. This value is what gets sent to the server when the form is submitted, which may differ from the visible text displayed to the user.
Syntax
Following is the syntax for returning the value −
optionObject.value
Following is the syntax for setting the value −
optionObject.value = "newValue"
Parameters
newValue − A string that specifies the new value for the option element.
Return Value
Returns a string representing the value of the option element. If no value attribute is specified, it returns the text content of the option.
Getting Option Values
You can access option values using various methods. The most common approach is to get the selected option from a dropdown and retrieve its value.
Example
<!DOCTYPE html>
<html>
<head>
<title>Getting Option Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Subject</h2>
<select id="subjectSelect">
<option value="phy">Physics</option>
<option value="math">Mathematics</option>
<option value="chem">Chemistry</option>
<option value="eng">English</option>
</select>
<button onclick="showSelectedValue()">Show Selected Value</button>
<p id="result"></p>
<script>
function showSelectedValue() {
var select = document.getElementById("subjectSelect");
var selectedOption = select.options[select.selectedIndex];
var value = selectedOption.value;
var text = selectedOption.text;
document.getElementById("result").innerHTML =
"Selected Value: " + value + "<br>Selected Text: " + text;
}
</script>
</body>
</html>
The output shows both the value attribute and the displayed text −
Selected Value: phy Selected Text: Physics
Setting Option Values Dynamically
You can modify option values using JavaScript, which is useful for dynamic forms or updating options based on user interactions.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Option Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Option Values</h2>
<select id="courseSelect">
<option value="basic">Basic Course</option>
<option value="inter">Intermediate Course</option>
<option value="adv">Advanced Course</option>
</select>
<br><br>
<button onclick="updateValues()">Update to Premium Values</button>
<button onclick="showAllValues()">Show All Values</button>
<div id="output"></div>
<script>
function updateValues() {
var select = document.getElementById("courseSelect");
select.options[0].value = "basic-premium";
select.options[1].value = "inter-premium";
select.options[2].value = "adv-premium";
document.getElementById("output").innerHTML = "Option values updated to premium!";
}
function showAllValues() {
var select = document.getElementById("courseSelect");
var output = "Current option values:<br>";
for (var i = 0; i < select.options.length; i++) {
output += select.options[i].text + " = " + select.options[i].value + "<br>";
}
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
This example demonstrates how option values can be dynamically updated and retrieved.
Working with Form Submission
The option value property is crucial for form submissions, as it determines what data is sent to the server when the form is submitted.
Example
<!DOCTYPE html>
<html>
<head>
<title>Option Values in Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Registration Form</h2>
<form id="registrationForm">
<label for="course">Select Course:</label>
<select name="course" id="course">
<option value="">-- Select Course --</option>
<option value="html5">HTML5 Fundamentals</option>
<option value="css3">CSS3 Advanced</option>
<option value="js">JavaScript Essentials</option>
</select>
<br><br>
<button type="button" onclick="processForm()">Process Selection</button>
</form>
<div id="formData"></div>
<script>
function processForm() {
var courseSelect = document.getElementById("course");
var selectedValue = courseSelect.value;
var selectedText = courseSelect.options[courseSelect.selectedIndex].text;
if (selectedValue === "") {
document.getElementById("formData").innerHTML =
"<p style='color: red;'>Please select a course!</p>";
} else {
document.getElementById("formData").innerHTML =
"<h3>Form Data:</h3>" +
"Course Code: " + selectedValue + "<br>" +
"Course Name: " + selectedText + "<br>" +
"This value would be sent to server: course=" + selectedValue;
}
}
</script>
</body>
</html>
When a course is selected, the form shows what data would be submitted −
Form Data: Course Code: html5 Course Name: HTML5 Fundamentals This value would be sent to server: course=html5
Key Points
The
valueattribute determines what gets sent to the server, not the visible text.If no
valueattribute is specified, the option's text content is used as the value.Option values can be dynamically modified using JavaScript.
Empty string values can be used for default "please select" options.
The property is both readable and writable, allowing full control over option values.
Conclusion
The HTML DOM option value property is essential for handling dropdown selections in web forms. It allows you to retrieve the selected option's value for processing or modify option values dynamically. Understanding this property is crucial for creating interactive forms and handling user selections effectively.
209 Views
