如何创建:级联下拉列表
学习如何使用 JavaScript 创建级联下拉列表。
创建三个下拉列表
在 HTML 表单内创建三个下拉列表。
第二个和第三个下拉列表将显示不同的选项,具体取决于父下拉列表中选择的值。
第一步 - 添加 HTML:
<form name="form1" id="form1" action="/action_page.php"> Subjects: <select name="subject" id="subject"> <option value="" selected="selected">Select subject</option> </select> <br><br> Topics: <select name="topic" id="topic"> <option value="" selected="selected">Please select subject first</option> </select> <br><br> Chapters: <select name="chapter" id="chapter"> <option value="" selected="selected">Please select topic first</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 下拉菜单
教程:如何可悬停的下拉菜单