Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Option value Property

  • Last Updated : 19 Feb, 2019

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
              
        <!-- 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() {
                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
              
        <!-- List of Options -->
        <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 set Option value property -->
        <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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :