Related Articles

Related Articles

HTML | DOM Option text Property
  • Last Updated : 19 Feb, 2019

The Option text property in HTML DOM is used to set or return the text of an <option> element. The text value sent to the server when user submitted the form.

Syntax:

  • It is used to return the Option text Property.
    optionObject.text
  • It is used to set the Option text Property.
    optionObject.text = text
  • Property Values: It contains single value text which defines the text content of an <option> element.

    Return Value: It returns a string value which represent the text content of the option element.

    Example 1: This Example illustrate how to set the Option text Property.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            HTML DOM Option text Property
        </title
    </head>
      
    <body style = "text-align: center;">
              
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1
          
        <h2>DOM Option text Property</h2
              
        <!-- List of Options -->
        <select
            <option id="GFG">Merge Sort</option
            <option id="geeks">Bubble Sort</option
            <option id="user">Insertion Sort</option>
            <option id="java">Quick Sort</option
        </select>
          
        <br><br>
      
        <button onclick="myGeeks()">
            Submit
        </button>
          
        <!-- script to set option text -->
        <script>
            function myGeeks() {
                var x = document.getElementById("GFG").text
                        = "Heap Sort";
            }
        </script>
    </body
      
    </html>                                    

    chevron_right

    
    

    Output:
    before Click on the Button:

    After Click on the Button:

    Example 2: This Example illustrate how to return the Option text Property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            HTML DOM Option text Property
        </title
    </head
      
    <body style = "text-align: center;">
              
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1
          
        <h2>DOM Option text Property</h2
              
        <!-- List of Options -->
        <select onchange="myGeeks(this)"
            <option id="GFG">Merge Sort</option
            <option id="geeks">Bubble Sort</option
            <option id="user">Insertion Sort</option>
            <option id="java">Quick Sort</option
        </select>
          
        <br><br>
          
        <p id="sudo" style="font-size:20px;color:green;"></p>
          
        <!-- script to return Option text -->
        <script>
            function myGeeks(selTag) {
                var x = selTag.options[selTag.selectedIndex].text;
                document.getElementById("sudo").innerHTML
                    = "The Selected Option is : " + x;
            }
        </script>
    </body
      
    </html>                    

    chevron_right

    
    

    Output:
    Before Selecting an Option:

    After Selecting an Option”

    Supported Browsers: The browser supported by DOM Option text Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img




    My Personal Notes arrow_drop_up
Recommended Articles
Page :