下拉菜单联动dom操作案例
源码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="xueli" onchange="updateInfo()">
<option value="A">大专</option>
<option value="B">本科</option>
<option value="C">研究生</option>
</select>
<select id="xuexiao">
<option value="A">A学院</option>
<option value="B">B学院</option>
<option value="C">C学院</option>
</select>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script>
function updateInfo() {
var xueli = $("#xueli").val();
var xuexiao = $("#xuexiao");
xuexiao.html("");
var str = "";
if (xueli == "A") {
str = "<option value='A'>A学院</option>";
str = "<option value='B'>B学院</option>";
str = "<option value='C'>C学院</option>";
} else if (xueli == "B") {
str = "<option value='A'>A大学</option>";
str = "<option value='B'>B大学</option>";
str = "<option value='C'>C大学</option>";
} else if (xueli == "C") {
str = "<option value='A'>A研究所</option>";
str = "<option value='B'>B研究所</option>";
str = "<option value='C'>C研究所</option>";
}
xuexiao.append(str);
}
</script>
</body>
</html>注意：其它类似的内容无论是多少级联动，都是类似的。
