Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Option selected Property

  • Last Updated : 27 Aug, 2019

The Option selected Property in HTML DOM is used for setting or returning the value of the selected state of an <option> Element. This is a Boolean Attribute.

Syntax:

  • It return the selected property.
    optionObject.selected 
  • It sets the selected property.
    optionObject.selected = true|false

Property Values: It contains a Boolean value which specifies that Whether the option would be selected or not.

  • true: It specifies the option is selected.
  • false: It has a Default value. An option would not be selected.

Return Value: It returns a Boolean value which represents that the option would be selected or not.

Example-1: This Example returns an Option selected Property.






<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM option Selected Property
  </title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM option Selected Property</h2>
    <form id="myGeeks">
        <select id="GFG">
            <option id="sudo">
              Choose an option
          </option>
            <option value="html">
              HTML
          </option>
            <option value="java">
              JAVA
          </option>
            <option value="C++">
              C++
          </option>
            <option value="php">
              PHP
          </option>
            <option value="perl" selected>
              PERL
          </option>
        </select>
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button onclick="myGeeks()">
      Submit
  </button>
    <h3 id="demo"></h3>
    <script>
        function myGeeks() {
  
            var x = document.getElementById(
                "sudo").selected;
            document.getElementById(
              "demo").innerHTML = x;
        }
    </script>
  
</body>
  
</html>

Before Clicking on Button:

After Clicking On Button:

Example-2: This Example sets the Option Selected Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM option Selected Property
  </title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM option Selected Property</h2>
    <form id="myGeeks">
        <select id="GFG">
            <option id="sudo">
              Choose an option
          </option>
            <option value="html">
              HTML
          </option>
            <option value="java">
              JAVA
          </option>
            <option value="C++">
              C++
          </option>
            <option value="php">
              PHP
          </option>
            <option value="perl" selected>
              PERL
          </option>
        </select>
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button onclick="myGeeks()">
      Submit
  </button>
    <h3 id="demo"></h3>
    <script>
        function myGeeks() {
  
            var x = document.getElementById(
                "sudo").selected = true;
            
            document.getElementById(
              "demo").innerHTML = x;
        }
    </script>
  
</body>
  
</html>

Before Clicking on Button:

After Clicking On Button:

Supported Browsers: The browsers supported by DOM Option selected Property are listed below:

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :