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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
javascript实现点击产生随机图形
Jan 25 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作的文本留言本的例子(六)
2006/10/09 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python动态参数用法实例分析
2015/05/25 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python File readlines() 使用方法
2018/03/19 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
区域销售经理职责
2013/12/22 职场文书
实习生的自我评价
2014/01/08 职场文书
创先争优个人总结
2015/03/04 职场文书
会议通知范文
2015/04/15 职场文书
python基础详解之if循环语句
2021/04/24 Python
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
php将xml转化对象的实例详解
2021/11/17 PHP