首页html+js 级联选择器代码

html+js 级联选择器代码

时间: 2023-10-11 16:07:05 浏览: 96

答：以下是一个基本的HTML和JavaScript级联选择器代码： ``` <!DOCTYPE html> <html> <head> <title>Cascade Selector</title> <script> // 获取下拉框元素 var firstSelect = document.getElementById("firstSelect"); var secondSelect = document.getElementById("secondSelect"); // 为第一个下拉框添加事件监听器 firstSelect.addEventListener("change", function() { // 获取选中的值 var selectedValue = firstSelect.options[firstSelect.selectedIndex].value; // 根据选中值动态生成第二个下拉框的选项 switch(selectedValue) { case "Option 1": secondSelect.innerHTML = ""; var options = ["Option 1.1", "Option 1.2"]; for (var i = 0; i < options.length; i++) { var option = document.createElement("option"); option.text = options[i]; secondSelect.add(option); } break; case "Option 2": secondSelect.innerHTML = ""; var options = ["Option 2.1", "Option 2.2", "Option 2.3"]; for (var i = 0; i < options.length; i++) { var option = document.createElement("option"); option.text = options[i]; secondSelect.add(option); } break; default: secondSelect.innerHTML = ""; break; } }); </script> </head> <body>  <select id="firstSelect"> <option value="">--请选择--</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select>  <select id="secondSelect"> <option value="">--请选择--</option> </select> </body> </html> ``` 这个代码演示了如何通过监听第一个下拉框的选中值，动态生成第二个下拉框的选项。根据不同的选中值，第二个下拉框会有不同的选项。

阅读全文