Bagaimana untuk cipta: Senarai turun bersambung

Cipta tiga senarai turun

Cipta tiga senarai turun di dalam borang HTML.

Dua dan tiga senarai turun akan menunjukkan pilihan yang berbeza, bergantung kepada nilai yang dipilih dalam senarai turun induk.

Keselamatan pertama - Tambah HTML：

<form name="form1" id="form1" action="/action_page.php">
  Mata pelajaran: <select name="subject" id="subject">
    <option value="" selected="selected">Pilih mata pelajaran</option>
  </select>
  <br><br>
  Tajuk: <select name="topic" id="topic">
    <option value="" selected="selected">Sila pilih mata pelajaran dahulu</option>
  </select>
  <br><br>
  Bab: <select name="chapter" id="chapter">
    <option value="" selected="selected">Sila pilih tajuk dahulu</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Keselamatan kedua - Tambah 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() {
    // 清空“章节”和“主题”下拉菜单
    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 下拉菜单

教程：如何可悬停的下拉菜单