Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Option label Property
The DOM option label property is used to get or set the value of the label attribute of an <option> element in HTML. The label attribute provides a shorter alternative text for the option, which can be displayed in the dropdown instead of the option's content.
Syntax
Following is the syntax to return the label value −
object.label
Following is the syntax to modify the label value −
object.label = "text"
Return Value
The property returns a string representing the value of the label attribute. If no label attribute is specified, it returns an empty string.
Getting Option Label
Following example demonstrates how to retrieve the label value from a selected option −
<!DOCTYPE html>
<html>
<head>
<title>Option Label Property - Get</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select your favorite subject:</h2>
<select id="subjectSelect">
<option label="Physics">Physics - Study of Matter and Energy</option>
<option label="Math">Mathematics - Numbers and Logic</option>
<option label="Chem">Chemistry - Study of Substances</option>
<option label="Eng">English - Language and Literature</option>
</select>
<button onclick="showLabel()">Show Label</button>
<p id="result"></p>
<script>
function showLabel() {
var select = document.getElementById("subjectSelect");
var selectedOption = select.options[select.selectedIndex];
document.getElementById("result").innerHTML = "Label: " + selectedOption.label;
}
</script>
</body>
</html>
The output shows the label value of the selected option −
Select your favorite subject: [Physics - Study of Matter and Energy ?] [Show Label] Label: Physics
Setting Option Label
Following example shows how to modify the label attribute of options dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Option Label Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages:</h2>
<select id="languageSelect">
<option label="JS">JavaScript</option>
<option label="PY">Python</option>
<option label="JV">Java</option>
<option label="CP">C++</option>
</select>
<button onclick="changeLabels()">Change to Full Names</button>
<button onclick="resetLabels()">Reset to Short Names</button>
<p id="status"></p>
<script>
function changeLabels() {
var select = document.getElementById("languageSelect");
select.options[0].label = "JavaScript";
select.options[1].label = "Python";
select.options[2].label = "Java";
select.options[3].label = "C++";
document.getElementById("status").innerHTML = "Labels changed to full names";
}
function resetLabels() {
var select = document.getElementById("languageSelect");
select.options[0].label = "JS";
select.options[1].label = "PY";
select.options[2].label = "JV";
select.options[3].label = "CP";
document.getElementById("status").innerHTML = "Labels reset to abbreviations";
}
</script>
</body>
</html>
Clicking "Change to Full Names" modifies all option labels to display the complete language names, while "Reset to Short Names" restores the abbreviations.
Programming Languages: [JavaScript ?] [Change to Full Names] [Reset to Short Names] Labels changed to full names
Label vs Text Content
The label attribute provides an alternative display text that is shorter than the option's actual text content. This is particularly useful when you want to show abbreviated options in the dropdown while maintaining descriptive text content.
<!DOCTYPE html>
<html>
<head>
<title>Label vs Text Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Countries:</h2>
<select id="countrySelect">
<option label="USA">United States of America</option>
<option label="UK">United Kingdom</option>
<option label="CA">Canada</option>
<option label="AU">Australia</option>
</select>
<button onclick="compareValues()">Compare Label vs Text</button>
<div id="comparison"></div>
<script>
function compareValues() {
var select = document.getElementById("countrySelect");
var selectedOption = select.options[select.selectedIndex];
var result = "<p><strong>Label:</strong> " + selectedOption.label + "</p>";
result += "<p><strong>Text Content:</strong> " + selectedOption.text + "</p>";
document.getElementById("comparison").innerHTML = result;
}
</script>
</body>
</html>
The output demonstrates the difference between label and text content −
Countries: [USA ?] [Compare Label vs Text] Label: USA Text Content: United States of America
Browser Compatibility
The option label property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. However, the visual display of labels in dropdown menus may vary between different browsers and operating systems.
Conclusion
The DOM option label property provides a way to get and set shorter alternative text for option elements. It's particularly useful for creating more compact dropdown displays while preserving descriptive option content. The property returns a string value and can be modified dynamically using JavaScript.
164 Views
