HTML DOM Option Object

HTML Web Development Front End Technology

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 −

Property	Explanation
disabled	It returns and modify whether the option element is disabled or not.
defaultSelected	It returns the default value of option element in an HTML document.
form	It returns the reference of the form that contain the option element in HTML document.
index	It returns and modify the index position of an option in the HTML document.
label	It returns and alter the value of the label attribute of an option in an HTML document.
selected	It returns and alter the value of the selected attribute of an option.
text	It returns and modify the text of an option.
value	It 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>