基于jQuery+JSON的省市区三级地区联动

简介:

查看演示:http://www.helloweba.com/demo/cityselect/

源码下载:http://files.cnblogs.com/files/huangcong/cityselect.rar

 

省市区联动下拉效果在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" 
}); 

 

 




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/5337188.html,如需转载请自行联系原作者

相关文章
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
77 0
|
7天前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
12 2
|
1月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
7月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
31 0
|
7月前
|
JSON 数据格式
jQuery+ajax解析json数据渲染
jQuery+ajax解析json数据渲染
35 0
|
8月前
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
41 0
|
XML 存储 JSON
【jquery】前端数据格式:json、xml对比
【jquery】前端数据格式:json、xml对比
101 0
|
JSON 前端开发 JavaScript
jquery ajax 和servlet json 结合的简单小例子
jquery ajax 和servlet json 结合的简单小例子
116 0
|
JSON JavaScript 数据格式
jquery请求json数据失败但是不报错
jquery请求json数据失败但是不报错
141 0
jquery请求json数据失败但是不报错
|
XML JSON JavaScript
jQuery、ajax、JSON三者之间的关系
最近在做项目的过程中,对于jQuery、ajax、JSON这三者的关系总是理不清楚,于是,在简单是使用,有了丁点的经验,于是对这三者的关系做了下研究: 1、jQuery : 以下来自百度百科 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
3491 0