JavaScript省市区三级联动菜单效果


Posted in Javascript onSeptember 21, 2016

本文实例为大家分享了三级联动省市区js完整代码,供大家参考,具体内容如下

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
Angular2 环境配置详细介绍
Sep 21 #Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 #Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 #Javascript
AngularJS通过$http和服务器通信详解
Sep 21 #Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python调用java的Webservice示例
2014/03/10 Python
python基础教程之字典操作详解
2014/03/25 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python_mask_array的用法
2020/02/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
夜大毕业生自我评价分享
2013/11/10 职场文书
财务部总监岗位职责
2014/03/12 职场文书
经典公益广告词
2014/03/13 职场文书
和睦家庭事迹
2014/05/14 职场文书
营业用房租赁协议书
2014/11/26 职场文书
学生个人评语大全
2015/01/04 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
解除租赁合同协议书
2016/03/21 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
实现GO语言对数组切片去重
2022/04/20 Golang