HTML DOM Option label Property

HTML Web Development Front End Technology

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 −

Live Demo

<!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 −

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.

AmitDiwan

Published on 19-Jul-2019 13:22:51

Previous Page Print Page