基于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)附源码 超详细
76 0
|
11月前
|
存储 Web App开发 JSON
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
232 0
|
6天前
|
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是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
40 0
|
8月前
|
JavaScript 前端开发
前端基础 - JQuery实现省级联动
前端基础 - JQuery实现省级联动
37 0
|
XML 存储 JSON
【jquery】前端数据格式:json、xml对比
【jquery】前端数据格式:json、xml对比
101 0
|
SQL 数据采集 JSON
java解析json数据生成mysql省市区街道四级联动sql
这里为了省事直接用嵌套的for循环了,生成sql文件以后直接用sql工具运行即可,需要提前创建好数据库表。
522 0