JavaScript+Json写的二级联动
省市区的联动,相当常见
我就不写这么大数据的了,先写个简单的试一试
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!--二级联动--> <div style="width: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>
个人学习随笔,不一定原创,不定时更新
[gitHub]: https://github.com/MicahZJ
[博客]: https://micahzj.github.io/MicahZJ.github.io/
[掘金]: https://juejin.im/user/5c1355ebe51d4521030cfe84/posts/
有关问题,或者想和本人讨论
欢迎通过本人QQ872219020联系
或者在github上提issues,虽然我不一定会去看o
[gitHub]: https://github.com/MicahZJ
[博客]: https://micahzj.github.io/MicahZJ.github.io/
[掘金]: https://juejin.im/user/5c1355ebe51d4521030cfe84/posts/
有关问题,或者想和本人讨论
欢迎通过本人QQ872219020联系
或者在github上提issues,虽然我不一定会去看o