前端jQuery最新省市区三级联动插件，包含sql数据库
技术：jquery+html
概述
省市区三级联动是项目中很常见到的小功能，实现起来可以分为前台实现和后台实现。后台实现起来有些麻烦，需要建表查询省份数据，根据id查询下一级地区数据，太过繁琐而且还会有延迟。前端实现起来就容易多了,用起来没有延迟，以下就是前端实现的例子。
详细
一、目录结构
二、功能演示
1)用浏览器打开，index.html
2)单击，输入框，
3)选择省份
4).选择城市
5).选择区县
6).显示已选中的名称和ID
三、前端页面
<!DOCTYPE html>
<html>
<head >
<title>地区数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/area.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/area.js"></script>
<script type="text/javascript" src="js/selectCity.js"></script>
<script type='text/javascript'>
$(function () {
//加载省市区控件
$("#city").click(function(e) {
SelCity(this, e);
});
//定时器获取已选中数据
var timeout = setInterval(function(){
var $cityId = $("#city").attr('data-id');
var $cityName = $("#city").attr('data-name');
$cityId = $cityId.split("-");
$cityName = $cityName.split("-");
if($cityId != null && $cityName != null && $cityId.length > 0 && $cityId.length == $cityName.length){
$("#districtName").html('');
$("#districtCode").html('');
var size = $cityId.length;
for (var index = 0; index < size; index++){
if(index == 0){
$("#provinceName").html($cityName[index]);
$("#provinceCode").html($cityId[index]);
}else if(index == 1){
$("#cityName").html($cityName[index]);
$("#cityCode").html($cityId[index]);
}else if(index == 2){
$("#districtName").html($cityName[index]);
$("#districtCode").html($cityId[index]);
}
}
}
},1000);
});
</script>
</head>
<body>
<p> </p>
<p> </p>
<label class="is-required">所在地区</label>
<div class="area-select">
<div class="col" id="city" data-name="北京市-朝阳区" data-id="110100-110105">北京市-朝阳区</div>
<i class="iconfont icon-dropdown"></i>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2>省份名称： <span id="provinceName"></span> 省份ID： <span id="provinceCode"></span></h2>
<h2 >城市名称： <span id="cityName"></span> 城市ID： <span id="cityCode"></span></h2>
<h2>区县名称： <span id="districtName"></span> 区县ID： <span id="districtCode"></span></h2>
</body>
</html>地区数据
var province =[{"city":[{"name":"东城区","id":110101},{"name":"西城区","id":110102}.....];
var area =[{"name":"长安区","pid":130100,"id":130102},{"name":"桥西区","pid":130100,"id":130104}.....];吐槽一下：百度搜省市区联动插件，各种坑爹。什么3个select 框， 3个ajax 查询，又麻烦又不好看又不好用。后来忍不了，优改了一下人家的控件，再去官网下载最新的地区数据。
本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢
手机上随时阅读、收藏该文章 ？请扫下方二维码
