Paano gumawa: May kasamang dropdown list

Lumikha ng tatlong dropdown list

Lumikha ng tatlong dropdown list sa loob ng HTML form.

Ang pangalawang at ikalawang dropdown list ay magpapakita ng iba't ibang opsyon, depende sa halaga ng pinili sa magulang na dropdown list.

第一步 - 添加 HTML：

<form name="form1" id="form1" action="/action_page.php">
  Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Piliin ang paksa</option>
  </select>
  <br><br>
  Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Mangyaring piliin ang paksa muna</option>
  </select>
  <br><br>
  Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Mangyaring piliin ang paksa muna</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

第二步 - 添加 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 下拉菜单

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