The Option label property in HTML DOM is used to set or return the value of the label attribute in an <option> element. The label attribute is used to specify the label for an option. This attribute contains the text value which represents the shorted label for the option.
Syntax:
- It is used to return the label property.
optionObject.label
- It is used to set the label property.
optionObject.label = text
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Property Value: This property contains single value text which is used to represents the shorted label for option.
Return Value: It returns a string value which represent the shortest label for option element or in a drop-down list.
Example 1: This example describes how to set option label property.
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Option label Property
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>DOM option label Property</h2>
<select>
<option>Choose an option</option>
<option id="GFG" label="html">HTML</option>
<option id="Geeks" label="java">JAVA</option>
<option id="sudo" label="C++">C++</option>
</select> <br><br><br><br><br>
<button onclick = "myGeeks()">
Submit
</button>
<!-- script to use option label property -->
<script>
function myGeeks() {
document.getElementById("Geeks").label
= "Javascript";
}
</script>
</body>
</html>
|
Output:
Before Click on the Button:
After Click on the Button:
Example 2: This example describes how to return Option label property.
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM option label Property
</title>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>DOM option label Property</h2>
<select>
<option>Choose an option</option>
<option id="GFG" label="html">HTML</option>
<option id="Geeks" label="java">JAVA</option>
<option id="sudo" label="C++">C++</option>
</select>
<br><br>
<button onclick = "myGeeks()">
Submit
</button>
<p id="demo" style="font-size:25px;color:green;"></p>
<!-- script to return option label property -->
<script>
function myGeeks() {
var x = document.getElementById("Geeks").label;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Option label property are listed below: