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 相关文章推荐
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
javascript简单链式调用案例分析
May 10 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
杏林同学录(一)
2006/10/09 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Python File readlines() 使用方法
2018/03/19 Python
python使用zip将list转为json的方法
2018/12/31 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
Python文件操作的面试题
2013/06/22 面试题
平面设计的岗位职责
2013/11/08 职场文书
药品营销策划方案
2014/06/15 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书