下拉菜单联动dom操作案例
源码：
<!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>
注意：其它类似的内容无论是多少级联动，都是类似的。
