如何 - 級聯下拉列表
學習如何使用 JavaScript 建立級聯下拉列表。
自己動手試一試 »
建立三個下拉列表
在 HTML 表單中建立三個下拉列表。
第二個和第三個下拉列表將根據父下拉列表中選擇的值顯示不同的選項。
步驟 1) 新增 HTML
示例
<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">選擇學科</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">請先選擇學科</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">請先選擇主題</option>
</select>
<br><br>
<input type="submit" value="提交">
</form>
步驟 2) 新增 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() {
//empty Chapters- and Topics- dropdowns
chapterSel.length = 1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//empty Chapters dropdown
chapterSel.length = 1;
//display correct values
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 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示: 前往我們的 可懸停下拉選單 瞭解更多關於可懸停下拉選單的資訊。
