Open In App

HTML | DOM Option selected Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 27 Aug, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads