विकल्प लेबल प्रॉपर्टी क्या है?
HTML DOM में Option label प्रॉपर्टी किसी <option> तत्व के label विशेषता का मान प्राप्त करने या सेट करने के लिए उपयोग की जाती है। यह प्रॉपर्टी ड्रॉपडाउन सूची में प्रत्येक विकल्प के लिए एक छोटा, उपयोगकर्ता-अनुकूल लेबल प्रदान करती है जो वास्तविक मान से अलग हो सकता है।
सिंटैक्स
लेबल मान प्राप्त करना
object.labelलेबल मान सेट/बदलना
object.label = "text"उदाहरण
नीचे एक पूर्ण उदाहरण दिया गया है जो दर्शाता है कि कैसे label प्रॉपर्टी का उपयोग करके चयनित विकल्प का लेबल प्रदर्शित किया जाता है:
<!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 डेमो</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</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">लेबल मान दिखाएं</button>
<div class="show"></div>
<script>
function showLabel() {
var dropDown = document.querySelector(".drop-down");
var selectedOption = dropDown.options[dropDown.selectedIndex];
document.querySelector(".show").innerHTML = "Label = " + selectedOption.label;
console.log(selectedOption.label);
}
</script>
</body>
</html>आउटपुट
ड्रॉपडाउन सूची से अपना पसंदीदा विषय चुनें और फिर "लेबल मान दिखाएं" बटन पर क्लिक करके उस विकल्प के लेबल का मान प्रदर्शित करें।
मुख्य बिंदु
labelविशेषता वैकल्पिक है; यदि निर्दिष्ट नहीं है, तो विकल्प का टेक्स्ट कंटेंट ही लेबल के रूप में उपयोग होता है।- यह प्रॉपर्टी केवल पढ़ने योग्य नहीं है; आप जावास्क्रिप्ट के माध्यम से इसे डायनामिक रूप से बदल भी सकते हैं।
- लेबल विशेषता मुख्य रूप से
<optgroup>के साथ उपयोग होने पर अधिक उपयोगी होती है।
