一、概述
省市区三级联动是项目中很常见到的小功能,实现起来可以分为前台实现和后台实现。后台实现起来有些麻烦,需要建表、插入中国地区数据和后台提供查询地区和子地区的数据接口。为了快速实现地区的省市区联动效果,前端实现起来就容易多了,并且点击效果比后台实现起来几乎没有延迟,今天给大家介绍一款省市区三级联动插件Distpicker。
先来看看其效果:
插件下载地址: http://www.jq22.com/jquery-info8054
二、使用
1.引入bootstrap css
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
2.引入js文件(distpicker.data.js是存放省市区数据的文件,distpicker.js是主要地区选择文件)
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
3.html结构(参考),关注三个<select>标签和一个<div data-toggle="distpicker>,其他都是样式相关结构。
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province1">Province</label>
<select class="form-control" id="province1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city1">City</label>
<select class="form-control" id="city1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district1">District</label>
<select class="form-control" id="district1"></select>
</div>
</div>
</form>
4.调用两种方式:
4.1 直接在结构上添加属性
在容器<div>上添加data-distpicker即可
在<select>标签上添加可自定义默认值 <
select
data-province
=
"浙江省"
>
<
select
data-city
=
"杭州市"
>
<
select
data-district
=
"西湖区"
>
4.2 通过js调用 $('#容器').distpicker()方法,启用插件(推荐方式)
4.2.1 自定义占位符()
$("#distpicker2").distpicker({
province: "---- 所在省 ----",
city: "---- 所在市 ----",
district: "---- 所在区 ----"
});
4.2.2自定义默认值
$("#distpicker3").distpicker({
province: "浙江省",
city: "杭州市",
district: "西湖区"
});
4.2.3其他参数设置:
- placeholder,默认值:true 是否需要首行占位符
- autoSelect,默认值: ture 是否默认选择(默认选择北京)
4.2.4方法
$().distpicker(
'reset');
重置select为初始状态。$().distpicker(
'reset'
,
true
);
destroy():销毁插件实例。
三、全部代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>中国省市区地址三级联动jQuery插件</title>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" />
</head>
<body>
<div class="jq22-container">
<div class="container">
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province1">Province</label>
<select class="form-control" id="province1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city1">City</label>
<select class="form-control" id="city1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district1">District</label>
<select class="form-control" id="district1"></select>
</div>
</div>
</form>
<div data-toggle="distpicker">
<select></select>
<select></select>
<select></select>
</div>
</div>
</div>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
</body>
</html>
(完)