这篇文章主要为大家详细介绍了 JavaScript 省市区三级联动菜单效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- Insert title here
- </title>
- <script type="text/javascript">
- var cityList = new Array();
- var quList = new Array();
- cityList['北京'] = ['北京'];
- cityList['浙江'] = ['杭州市', '温州市', '金华市', '临安市'];
- cityList['陕西'] = ['西安', '宝鸡', '咸阳'];
- cityList['甘肃'] = ['兰州市', '武威市', '酒泉市', '张掖市'];
- quList['北京'] = ['1区', '2区', '3区', '4区'];
- quList['杭州市'] = ['5区', '6区', '7区', '8区'];
- quList['温州市'] = ['9区', '10区', '11区', '12区'];
- quList['西安'] = ['13区', '14区', '15区', '16区'];
- quList['宝鸡'] = ['17区', '18区', '19区', '20区'];
- quList['兰州市'] = ['21区', '22区', '23区', '24区'];
- window.onload = allData;
- function allData() {
- var shengfen = document.getElementById('shengfen');
- for (var sf in cityList) {
- shengfen.add(new Option(sf, sf));
- }
- }
- function changeCity() {
- var chengshi = document.getElementById('chengshi');
- var sheng = document.getElementById('shengfen').value;
- chengshi.options.length = 1;
- for (var cs in cityList[sheng]) {
- chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));
- }
- }
- function changequ() {
- var shiqu = document.getElementById('shiqu');
- var cheng = document.getElementById('chengshi').value;
- shiqu.options.length = 1;
- for (var sh in quList[cheng]) {
- shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));
- }
- }
- </script>
- </head>
- <body>
- <br />
- <select id="shengfen" style="width:100px" onchange="changeCity()">
- <option>
- --选择省份--
- </option>
- </select>
- <select id="chengshi" style="width:100px" onchange="changequ()">
- <option>
- --选择城市--
- </option>
- </select>
- <select id="shiqu" style="width:100px">
- <option>
- --选择区县--
- </option>
- </select>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0513/331678.html