HTML DOM Select Object - संपूर्ण गाइड और उदाहरण

HTML DOM Select Object

HTML DOM Select Object HTML दस्तावेज़ में <select> तत्व को दर्शाता है। यह ड्रॉप-डाउन सूचियों को बनाने, एक्सेस करने और हेरफेर करने के लिए properties और methods प्रदान करता है।

Select Object बनाना

document.createElement("SELECT");

Select Object के Properties

Select Object के Methods

उदाहरण

JavaScript का उपयोग करके डायनामिकली ड्रॉप-डाउन सूची बनाना:

<!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 select Object Demo</h1>
<button onclick="createDropDownList()" class="btn">ड्रॉप-डाउन सूची बनाएं</button>
<script>
  function createDropDownList() {
    var dropDown = document.createElement("SELECT");
    dropDown.innerHTML = "<option>CAKE</option><option>PIZZA</option><option>BURGER</option>";
    document.body.appendChild(dropDown);
  }
</script>
</body>
</html>

आउटपुट

"ड्रॉप-डाउन सूची बनाएं" बटन पर क्लिक करने पर एक नई ड्रॉप-डाउन सूची बनेगी जिसमें CAKE, PIZZA और BURGER विकल्प होंगे।

मुख्य बिंदु

• Select Object ड्रॉप-डाउन सूचियों का पूर्ण नियंत्रण प्रदान करता है
• document.createElement("SELECT") से नया ड्रॉप-डाउन बना सकते हैं
• add() और remove() methods से विकल्पों को डायनामिकली प्रबंधित कर सकते हैं
• selectedIndex और value properties से चयनित विकल्प की जानकारी प्राप्त कर सकते हैं