JSON+Jquery省市区三级联动


Posted in Javascript onJanuary 13, 2016

效果图如下所示:

JSON+Jquery省市区三级联动

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库,以json的格式输出,然后复制json数据,创建js文件--> 
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.each(province, function (k, p) { 
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val(); 
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) { 
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove(); 
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
}); 
}); 
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
<option>aaaa</option>
<option>aaaa</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
<input type="button" id="btnOK" value="确定" />
</body>
</html>

本段代码比较简单,实用性也非常高,希望本文所述对大家有所帮助。

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
浅谈javascript中return语句
Jul 15 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
简单的JS时钟实例讲解
Jan 13 #Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 #Javascript
详解iframe与frame的区别
Jan 13 #Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 #Javascript
Jquery uploadify上传插件使用详解
Jan 13 #Javascript
You might like
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
nginx 设置多个站跨域
2021/03/09 Servers
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python批量下载抖音视频
2019/06/17 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
施工班组长岗位职责
2014/01/05 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
MySQL事务的隔离级别详情
2022/07/15 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技