HTML | DOM Option label Property
Last Updated :
13 Feb, 2019
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
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 >
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 >
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:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...