The Option value property in HTML DOM is used to set or return the value of the <option> element. The value is sent to the server when the form is submitted. This attribute contains the value text which sent to the server.
Syntax:
- It returns the option value property.
optionObject.value
- It is used to set the option value property.
optionObject.value = value
Property Values: It contains single property value value. This attribute contains the value text which sent to the server.
Return Value: It returns a string value which represent the text value sent to the server.
Example 1: This example illustrate how to return the Option value property.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Option Value Property
</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>DOM Option value Property</h2>
<select id="GFG">
<option value="merge">Merge Sort</option>
<option value="bubble">Bubble Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="quick">Quick Sort</option>
</select>
<br><br>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo" style="font-size:20px;color:green;"></p>
<script>
function myGeeks() {
var ind = document.getElementById("GFG").selectedIndex;
var opt = document.getElementsByTagName("option")[ind].value;
document.getElementById("sudo").innerHTML = opt;
}
</script>
</body>
</html>
|
Output:
Before Click on the Button::
After Click on the Button:
Example 2: This example illustrates how to set the Option value property.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Option Value Property
</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>DOM Option value Property</h2>
<select id="GFG">
<option value="merge">Merge Sort</option>
<option value="bubble">Bubble Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="quick">Quick Sort</option>
</select>
<br><br>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo" style="font-size:20px;color:green;"></p>
<script>
function myGeeks() {
document.getElementById("GFG").value = "Heap";
document.getElementById("sudo").innerHTML
= "The value of the value attribute has "
+ "been changed from 'merge' to 'Heap' ";
}
</script>
</body>
</html>
|
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Option value property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Feb, 2019
Like Article
Save Article