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

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

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

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

41条评论

  • 子龙缘

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

  • 解决了吗

  • 这个没有css文件

  • www。pkwind。com

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

  • 基于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.

  • 你好 请问您有没有解决这个问题啊?

  • 其实结合自己数据库的数据导出成js文件更好,这样就可以更加同步自己网站的数据,也更加容易管理

  • 不兼容浏览器的的加***->523778477,已修改好,完美兼容各个浏览器。

  • 加入Jquery Mobile的js的文件后会出现错误:Cannot read property 'c' of undefined.?为什么啊?求指教!!!

  • 说实在的,json读取数据库这段,很值得写出来,毕竟写成json文件维护起来不方便呢,期待博主能完善下。

  • 好是好,怎么获取到值呢??

  • 下载后怎么显示不了内容呢,选择的值全是空,什么地方出错了啊。

  • 怎么从数据库读取,,再进行修改

  • 请问怎么获取初始化的值?为什么我获取的都是空的呢?

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

  • 我也发生了这样的问题,你是怎么解决的?

  • 我也在看这个问题,如果存入ID:1的话用的可使用的地方就多了。。
    现在只能在数据库里面插入名称。你解决了没有??

  • 显示数据库数据的时候,省份会有问题,省份会直接显示为北京,但是查看源代码却不是

  • 如何获取与显示名不同的值?
    比如 <option value="1">北京</option> 显示的是北京,但是我想获取的是 value 里面的值 1。