Cara membuat: Daftar pilihan cascading

Buat tiga daftar pilihan

Buat tiga daftar pilihan di dalam formulir HTML.

Daftar pilihan kedua dan ketiga akan menampilkan opsi yang berbeda, tergantung nilai yang dipilih di daftar pilihan orang tua.

Pertama - Tambahkan HTML:

<form name="form1" id="form1" action="/action_page.php">
  Topik: <select name="subject" id="subject">
    <option value="" selected="selected">Pilih topik</option>
  </select>
  <br><br>
  Topik: <select name="topic" id="topic">
    <option value="" selected="selected">Silakan pilih topik terlebih dahulu</option>
  </select>
  <br><br>
  Bab: <select name="chapter" id="chapter">
    <option value="" selected="selected">Silakan pilih topik terlebih dahulu</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Ketiga - Tambahkan JavaScript:

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() {
    // Membersihkan daftar pilihan "bab" dan "topik"
    chapterSel.length = 1;
    topicSel.length = 1;
    // Menampilkan nilai yang benar
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Membersihkan daftar pilihan "bab"
    chapterSel.length = 1;
    // Menampilkan nilai yang benar
    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]);
    }
  }
}

coba sendiri

halaman relevan

Tutorial:Menu susun di bawah CSS

Tutorial:Bagaimana membuat menu susun yang dapat dihentikan