HTML DOM Option label Property

The DOM option label property returns and alter the value of the label attribute of an option in an HTML document.

Syntax

Following is the syntax −

Returning label

object.label

2. Modifying label

object.label = “text”

Example

Let us see an example of option label property −

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Option label Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option label="Physics">Physics</option>
<option label="Maths">Maths</option>
<option label="Chemistry">Chemistry</option>
<option label="English">English</option>
</select>
<button onclick="showLabel()" class="btn">Show Label Value</button>
<div class="show"></div>
<script>
   function showLabel() {
      var dropDown = document.querySelector(".drop-down");
      var msg = document.querySelector(".show").innerHTML="Label = " +    
         dropDown.options[dropDown.selectedIndex].label;
      console.log(dropDown.options[dropDown.selectedIndex].label);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Option label Property

Select your favourite subject from the drop-down list and then click on “Show Label Value” button to display the value of label of that option.

HTML DOM Option label Property