下拉多选 级联
时间: 2023-07-29 20:06:03 浏览: 97
下拉多选级联可以使用JavaScript和HTML来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉多选级联示例</title>
<script type="text/javascript">
function updateOptions() {
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var selected = parent.value;
// 清空子级下拉框中的选项
child.innerHTML = "";
// 根据选中的父级选项更新子级选项
if (selected == "option1") {
child.options.add(new Option("选项1-1", "option1-1"));
child.options.add(new Option("选项1-2", "option1-2"));
} else if (selected == "option2") {
child.options.add(new Option("选项2-1", "option2-1"));
child.options.add(new Option("选项2-2", "option2-2"));
} else if (selected == "option3") {
child.options.add(new Option("选项3-1", "option3-1"));
child.options.add(new Option("选项3-2", "option3-2"));
}
}
</script>
</head>
<body>
<select id="parent" onchange="updateOptions()">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<select id="child" multiple>
</select>
</body>
</html>
```
在这个示例中,我们定义了两个下拉框,一个是父级下拉框,一个是子级下拉框。当选中父级下拉框中的选项时,JavaScript会根据选中的选项动态更新子级下拉框中的选项。同时,我们使用了`multiple`属性来实现多选功能。
阅读全文