基于jQuery + JSON 的级联选择效果

时间：2015-11-18 15:35:58 阅读：159 评论：0 收藏：0 [点我收藏+]

标签：

昨天做项目的时候遇到了一个填写地址时选择省市的效果，看到了一个非常好用的 js ,这个是基于jQuery + JSON实现的，文件 jquery.cityselect.js 只有5kb 很小很实用。

html

首先在 <head>中添加引用 jQuery 和 cityselect 插件。

1<script src="js/jquery.2.1.4.js" type="text/javascript" charset="utf-8"></script> 
2<script src="js/jquery.cityselect.js" type="text/javascript" charset="utf-8"></script> 

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

1<div id="city">  
2    <select class="prov"></select>   
3    <select class="city" disabled="disabled"></select>  
4    <select class="dist" disabled="disabled"></select>  
5</div> 

jQuery插件调用

1<script type="text/javascript"> 
2$("#city_1").citySelect({ 
3    prov:"湖南", //省份  
4    city:"长沙", //城市  
5    dist:"岳麓区", //区县  
6    nodata:"none", //当子集无数据时，隐藏select  
7    required: false 
8}); 
9</script> 

当然插件信息也是可以扩展的，可以通过 city.url 来绑定数据，但要一定注意数据格式为 JSON 格式的。
例子：

1$("#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"  
12});  

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

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

基于jQuery + JSON 的级联选择效果

标签：

原文地址：http://www.cnblogs.com/aoxiaoqiang/p/4974316.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行