कैसे बनाएं: श्रेणीबद्ध ड्रॉपडाउन सूची

तीन ड्रॉपडाउन सूची बनाएं

HTML फॉर्म के अंदर तीन ड्रॉपडाउन सूची बनाएं。

दूसरी और तीसरी ड्रॉपडाउन सूची अलग-अलग विकल्प प्रदर्शित करेंगी, जो मात्रा ड्रॉपडाउन में चयनित मूल्य पर निर्भर करेगी。

पहला कदम - HTML जोड़ें:

<form name="form1" id="form1" action="/action_page.php">
  विषय: <select name="subject" id="subject">
    <option value="" selected="selected">विषय चुनें</option>
  </select>
  <br><br>
  विषय: <select name="topic" id="topic">
    <option value="" selected="selected">पहले विषय चुनें</option>
  </select>
  <br><br>
  अध्याय: <select name="chapter" id="chapter">
    <option value="" selected="selected">पहले विषय चुनें</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

दूसरा कदम - जावास्क्रिप्ट जोड़ें:

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // 'अध्याय' और 'विषय' ड्रॉपडाउन मेनू को खाली करें
    chapterSel.length = 1;
    topicSel.length = 1;
    // सही मान दिखाएं
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // 'अध्याय' ड्रॉपडाउन मेनू को खाली करें
    chapterSel.length = 1;
    // सही मान दिखाएं
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

स्वयं प्रयोग कीजिए

संबंधित पृष्ठ

पाठ्यक्रम:CSS ड्रॉपडाउन मेनू

पाठ्यक्रम:कैसे हॉवर करने वाला ड्रॉपडाउन मेनू