省市区的联动，相当常见
我就不写这么大数据的了，先写个简单的试一试
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!--二级联动--> <div style="500px;margin:100px auto"> <select id="oneDiv"> <option selected>请选择</option> <option id="1">性别</option> <option id="2">种族</option> <option id="3">天赋</option> </select> <select id="childSelect"> <option selected>请选择</option> </select> </div> <script> var Div = document.getElementById("oneDiv"); Div.onchange = function () { var childLinkage = document.getElementById("childSelect"); childLinkage.innerHTML = ""; // 每次进来先清空城市列表 var divValue = this.value; var cities = []; switch (divValue) { case "请选择": cities = ['请选择'] break; case "性别": cities = ['男', '女'] break; case "种族": cities = ['人族', '兽族', '妖族', '不死族'] break; case "天赋": cities = ['敏捷', '耐力', '生命'] break; } for (var i = 0; i < cities.length; i++) { var option = document.createElement('option'); //先创建option var textNode = document.createTextNode(cities[i]); //再把城市名作为子节点填入，也可用innerHTML option.appendChild(textNode); childLinkage.appendChild(option); } } </script> </body> </html>