基于jQuery+JSON的省市联动效果

原创文章作者：月光光 2012年09月12日 21:57helloweba.com 标签：jQuery JSON Ajax

省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。

HTML

首先在head中载入jquery库和cityselect插件。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。

<div id="city">
  	<select class="prov"></select> 
    <select class="city" disabled="disabled"></select>
    <select class="dist" disabled="disabled"></select>
</div>

jQuery

调用cityselect插件非常简单，直接调用：

 
$("#city").citySelect();

自定义参数调用，设置默认省市区。

 
$("#city").citySelect({ 
    url:"js/city.min.js", 
    prov:"湖南", //省份
    city:"长沙", //城市
	dist:"岳麓区", //区县
	nodata:"none" //当子集无数据时，隐藏select
});

当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。

 
$("#city").citySelect({
	url:{"citylist":[
		{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
        {"n":"JAVASCIPT"}]},
		{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
		{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
	]},
	prov:"",
	city:"",
	dist:"",
	nodata:"none"
});

你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。

 
$("#city").citySelect({
	url:"data.php"
});

更多示例效果请看demo，插件源码下载（含最新省市区数据）

声明：本文为原创文章，helloweba.net和作者拥有版权，如需转载，请注明来源于helloweba.net并保留原文链接：https://www.helloweba.net/javascript/188.html

你可能感兴趣的文章

共42条评论

窈窕小资

在360极速浏览器上，如果引用本地的Jq，浏览器会提示跨域错误，但是经过处理之后，在chrome就正常，在360极速浏览器上还是报错。

2019年01月29日 10:50
子龙缘

放到服务器上跑就不会报min.js找不到了

2017年04月13日 17:41
解决了吗

2017年01月09日 11:41
这个没有css文件

2016年11月17日 17:51
www。pkwind。com

2016年04月18日 16:54
此省市联动会使用getJSON方法去读取city.min.js文件中的JSON数据，所以需要修改jquery.cityselect.js文件第22行的url地址，指向项目的根目录路径(如项目下JS文件路径为：/static/js/city.min.js)，要不是读不到数据的。
如有不明白的可去http://www.pkwind.com留言发问。

2016年04月18日 16:53
基于jQuery+JSON的省市联动效果不能直接在本地打开吗？打开后没有获取到数据，select是空的而且还报这个错XMLHttpRequest cannot load file:///E:/haotou/cityselect/js/city.min.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

2016年04月12日 17:46
你好请问您有没有解决这个问题啊？

2016年02月14日 22:28
其实结合自己数据库的数据导出成js文件更好，这样就可以更加同步自己网站的数据，也更加容易管理

2015年11月02日 09:29
不兼容浏览器的的加***->523778477，已修改好,完美兼容各个浏览器。

2015年11月02日 09:18
加入Jquery Mobile的js的文件后会出现错误:Cannot read property 'c' of undefined.?为什么啊？求指教！！！

2015年07月20日 15:38
说实在的，json读取数据库这段，很值得写出来，毕竟写成json文件维护起来不方便呢，期待博主能完善下。

2015年01月31日 21:08
好是好，怎么获取到值呢？？

2015年01月23日 12:42
下载后怎么显示不了内容呢，选择的值全是空，什么地方出错了啊。

2015年01月13日 14:44
怎么从数据库读取，，再进行修改

2014年11月21日 17:13
请问怎么获取初始化的值？为什么我获取的都是空的呢？

2014年11月12日 10:01
加上required: false就可以了。我这样用的
$("#city_1").citySelect({
prov: "<%=prov1%>", //省份
city: "<%=city1%>", //城市
nodata: "none", //当子集无数据时，隐藏select
required: false
});

2014年11月06日 09:54
我也发生了这样的问题，你是怎么解决的？

2014年06月11日 20:42
我也在看这个问题，如果存入ID：1的话用的可使用的地方就多了。。
现在只能在数据库里面插入名称。你解决了没有？？

2014年03月26日 23:36
显示数据库数据的时候，省份会有问题，省份会直接显示为北京，但是查看源代码却不是

2013年12月18日 17:10

WEB技术分享