如何 - 级联下拉列表
了解如何使用 JavaScript 创建级联下拉列表。
自己尝试 »
创建三个下拉列表
在 HTML 表单中创建三个下拉列表。
第二个和第三个下拉列表将显示不同的选项，具体取决于在父下拉列表中选择的 value。
步骤 1) 添加 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="提交">
</form>
步骤 2) 添加 JavaScript
示例
var subjectObject = {
"前端": {
"HTML": ["链接", "图片", "表格", "列表"],
"CSS": ["边框", "边距", "背景", "浮动"],
"JavaScript": ["变量", "运算符", "函数", "条件"]
},
"后端": {
"PHP": ["变量", "字符串", "数组"],
"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]);
}
}
}
自己尝试 »
提示： 访问我们的 <a href="/css/css_dropdowns.asp">CSS 下拉菜单教程</a>，了解更多关于下拉菜单的信息。
提示： 访问我们的 <a href="howto_css_dropdown.asp">悬停下拉菜单</a>，了解更多关于悬停下拉菜单的信息。
