HTML DOM Option Object


The HTML DOM option Object represent the <option> element of an HTML document.

Let us now see how to create option object −

Syntax

Following is the syntax −

document.createElement(“OPTION”);

Properties

Following are the properties of option Object −

PropertyExplanation
disabledIt returns and modify whether the option element is disabled or not.
defaultSelectedIt returns the default value of option element in an HTML document.
formIt returns the reference of the form that contain the option element in HTML document.
indexIt returns and modify the index position of an option in the HTML document.
labelIt returns and alter the value of the label attribute of an option in an HTML document.
selectedIt returns and alter the value of the selected attribute of an option.
textIt returns and modify the text of an option.
valueIt returns and modify the value of an option which is going to be sent over the server.

Example

Let us see an example of HTML DOM option object −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#fff;
      color:#0197F6;
   }
   h1{
      color:#23CE6B;
   }
   .btn{
      background-color:#fff;
      border:1.5px dashed #0197F6;
      height:2rem;
      border-radius:2px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#0197F6;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM option Object Demo</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">Create a drop-down option</button>
<script>
   function createDropDownList() {
      var option = document.createElement("option");
      option.setAttribute("value","Hello");
      option.innerText='Hello';
      document.querySelector(".drop-down").appendChild(option);
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Create a drop-down option” button to create an option object and then add it to drop-down list.

Updated on: 30-Jul-2019

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements