HTML DOM Select add() Method - विकल्प जोड़ें

HTML DOM Select add() Method

HTML DOM select add() method ड्रॉप-डाउन सूची में नया विकल्प जोड़ता है। यह डायनामिकली विकल्पों को जोड़ने के लिए उपयोगी है।

Syntax

selectObject.add(option, index)

यहां option जोड़ने वाला विकल्प ऑब्जेक्ट है, और वैकल्पिक index वह स्थिति है जहां विकल्प डाला जाना है।

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: radial-gradient(circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90%) no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    display: block;
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 2px;
    margin: 1rem auto;
    outline: none;
  }
  .btn {
    background: orange;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Select add() method Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down' name="Drop Down List">
  <option>Physics</option>
  <option>Biology</option>
</select>
<button type="button" onclick="addSubject()" class="btn">इतिहास विषय जोड़ें</button>
<div class="show"></div>
<script>
  function addSubject() {
    var dropDown = document.querySelector(".drop-down");
    document.querySelector(".show").innerHTML = "इतिहास विषय जोड़ा गया";
    var option = document.createElement("OPTION");
    option.innerHTML = "History";
    dropDown.add(option);
  }
</script>
</body>
</html>

आउटपुट

"इतिहास विषय जोड़ें" बटन पर क्लिक करने पर "History" विकल्प ड्रॉप-डाउन सूची के अंत में जुड़ जाता है।

मुख्य बिंदु

• add(option, index) में index वैकल्पिक है - छोड़ने पर विकल्प अंत में जुड़ता है
• पहले document.createElement("option") से विकल्प बनाएं, फिर add() से जोड़ें
• option.value और option.text सेट करके मान और प्रदर्शन टेक्स्ट नियंत्रित करें
• remove() method के साथ संयोजन में उपयोग करके पूरी तरह डायनामिक ड्रॉप-डाउन बनाएं
• पुराने ब्राउज़र में index पैरामीटर आवश्यक हो सकता है