HTML DOM Option value Property

Last Updated : 03 Oct, 2024

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. This attribute contains the value text which sent to the server.

Return Value: It returns a string value which represents the text value sent to the server.

Example 1: This example illustrates how to return the Option value property.

html

</p><pre><code class="language-html">
<!DOCTYPE html> 
<html> 
    
<head> 
    <title>
        HTML DOM Option Value Property
    </title> 
</head> 

<body>
    <h2>DOM Option value Property</h2> 
        
    <!-- List of Option elements -->
    <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 to return selected option value -->
    <script>
        function myGeeks() {
            let ind = document.getElementById("GFG").selectedIndex;
            let opt = document.getElementsByTagName("option")[ind].value;
            document.getElementById("sudo").innerHTML = opt;
        }
    </script>
</body> 

</html>                    </code></pre><p></p><p dir="ltr"><b><strong>Output:</strong></b></p>[caption width="800"]<img src="https://media.geeksforgeeks.org/wp-content/uploads/20241003173320/optionValue.gif" alt="optionValue" width="472" height="218" srcset="">option value[/caption]<p dir="ltr"><b><strong>Example 2:</strong></b><span> This example illustrates to set the Option value property. </span></p><p><gfg-tabs data-run-ide="true" data-mode="light"><gfg-tab slot="tab">html

<!DOCTYPE html> 
<html> 

<head> 
	<title> 
		HTML DOM Option Value Property 
	</title> 
</head> 

<body> 
	
	<h2>DOM Option value Property</h2> 
		
	<!-- List of Options -->
	<select id="GFG"> 
		<option id="merge" 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 to set Option value property -->
	<script> 
		function myGeeks() { 
			document.getElementById("merge").value = "Heap"; 
			document.getElementById("sudo").innerHTML 
				= "The value of the value attribute has " 
				+ `been changed from 'merge' to ${document.getElementById("merge").value} `; 
		} 
	</script> 
</body> 

</html>

Output:

set optio value

Supported Browsers:

The browser supported by DOM Option value property are listed below:

Google Chrome
Firefox
Opera
Safari

HTML DOM value Property

manaschhabra2

Improve

Article Tags :

HTML DOM Option value Property

Syntax:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?