HTML DOM Option Object - संपूर्ण गाइड

HTML DOM Option Object

HTML DOM Option Object HTML दस्तावेज़ में <option> एलिमेंट को दर्शाता है। यह ड्रॉप-डाउन सूची में व्यक्तिगत विकल्प बनाने, एक्सेस करने और प्रबंधित करने का इंटरफेस प्रदान करता है।

Option Object बनाना

document.createElement("OPTION");

Option Object के Properties

उदाहरण

डायनामिकली विकल्प बनाकर ड्रॉप-डाउन में जोड़ना:

<!DOCTYPE html>
<html>
<head>
<style>
  body { text-align: center; background-color: #fff; color: #0197F6; }
  h1 { color: #23CE6B; }
  .btn {
    background-color: #fff;
    border: 1.5px dashed #0197F6;
    height: 2rem;
    border-radius: 2px;
    width: 60%;
    margin: 2rem auto;
    display: block;
    color: #0197F6;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM option Object Demo</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">एक ड्रॉप-डाउन विकल्प बनाएं</button>
<script>
  function createDropDownList() {
    var option = document.createElement("option");
    option.setAttribute("value", "Hello");
    option.innerText = 'Hello';
    document.querySelector(".drop-down").appendChild(option);
  }
</script>
</body>
</html>

आउटपुट

प्रारंभ में खाली ड्रॉप-डाउन दिखाता है। "एक ड्रॉप-डाउन विकल्प बनाएं" बटन पर क्लिक करने पर "Hello" विकल्प ड्रॉप-डाउन में जुड़ जाता है।

मुख्य बिंदु

• Option Object ड्रॉप-डाउन में व्यक्तिगत विकल्प का प्रतिनिधित्व करता है
• document.createElement("option") से नया विकल्प बना सकते हैं
• value सर्वर भेजा जाने वाला मान है, text उपयोगकर्ता को दिखने वाला टेक्स्ट है
• selected property से विकल्प को प्रोग्रामेटिकली चुन सकते हैं
• label attribute विकल्प के लिए वैकल्पिक छोटा लेबल प्रदान करता है
• appendChild() या select.add() से ड्रॉप-डाउन में विकल्प जोड़ें