省市縣三級聯動，在項目中應用的很廣泛，也是很基礎的功能。雖然說基礎，其實其中還是包含一些小的問題，例如有一些新手做這個功能的時候，容易忽略：如果用戶選擇完省-市-縣三級的時候，回頭又重新選擇了省，此時就應該講市-縣選擇的內容清空。否則容易導致數據錯誤。
現在我就用 ThinkPHP5 來給 搭建大家展示這個簡單的功能。為了演示的方便，我只在數據庫中添加有效的地區數據，全國的數據，自己可自行百度。
~~~
DROP TABLE IF EXISTS `area`;
CREATE TABLE `area` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '地區id',
`name` varchar(155) NOT NULL COMMENT '地區名稱',
`pid` int(11) NOT NULL COMMENT '上級地區id',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=30 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of area
-- ----------------------------
INSERT INTO `area` VALUES ('1', '江蘇', '0');
INSERT INTO `area` VALUES ('2', '南京', '1');
INSERT INTO `area` VALUES ('3', '徐州', '1');
INSERT INTO `area` VALUES ('4', '蘇州', '1');
INSERT INTO `area` VALUES ('5', '鎮江', '1');
INSERT INTO `area` VALUES ('6', '江寧區', '2');
INSERT INTO `area` VALUES ('7', '浦口區', '2');
INSERT INTO `area` VALUES ('8', '建鄴區', '2');
INSERT INTO `area` VALUES ('9', '玄武區', '2');
INSERT INTO `area` VALUES ('10', '云龍區', '3');
INSERT INTO `area` VALUES ('11', '泉山區', '3');
INSERT INTO `area` VALUES ('12', '鼓樓區', '3');
INSERT INTO `area` VALUES ('13', '銅山區', '3');
INSERT INTO `area` VALUES ('14', '姑蘇區', '4');
INSERT INTO `area` VALUES ('15', '工業園區', '4');
INSERT INTO `area` VALUES ('16', '高新區', '4');
INSERT INTO `area` VALUES ('17', '京口區', '5');
INSERT INTO `area` VALUES ('18', '潤州區', '5');
INSERT INTO `area` VALUES ('19', '鎮江新區', '5');
INSERT INTO `area` VALUES ('20', '浙江', '0');
INSERT INTO `area` VALUES ('21', '杭州', '20');
INSERT INTO `area` VALUES ('22', '寧波', '20');
INSERT INTO `area` VALUES ('23', '上城區', '21');
INSERT INTO `area` VALUES ('24', '下城區', '21');
INSERT INTO `area` VALUES ('25', '西湖區', '21');
INSERT INTO `area` VALUES ('26', '江干區', '21');
INSERT INTO `area` VALUES ('27', '海曙區', '22');
INSERT INTO `area` VALUES ('28', '江東區', '22');
INSERT INTO `area` VALUES ('29', '江北區', '22');
~~~
數據庫有了，那么我們來看看，控制器方面該如何設計，在Tools.php 中新建，一個 area：
~~~
// 三級聯動
public function area()
{
if(request()->isAjax()){
$code = input('post.code');
$lists = db('area')->where('pid', $code)->select();
return json(['code' => 1, 'data' => $lists, 'msg' => 'ok']);
}
$province = db('area')->where('pid', 0)->select();
$this->assign([
'province' => $province
]);
return $this->fetch();
}
~~~
代碼就是這么的簡潔。默認查出省份渲染到前臺，用戶觸發選擇，就把用戶選擇 id 發送過來，后臺查詢他的 子類即可。看一下欠他頁面和關鍵的 js 部分代碼，在 application\\index\\view\\tools 下面 新建 area.html
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省-市-縣三級聯動</title>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper wrapper-content">
<h1>省-市-縣三級聯動</h1>
<div class="row col-sm-6">
<div class="col-sm-4">
<select class="form-control m-b" id="p">
<option value="0" data-id="0">不限區域</option>
{foreach name="province" item="vo"}
<option value="{$vo.name}" data-id="{$vo.id}">{$vo.name}</option>
{/foreach}
</select>
</div>
<div class="col-sm-4">
<select class="form-control m-b" id="c" disabled>
<option value="0" data-id="0">請選擇城市</option>
</select>
</div>
<div class="col-sm-4">
<select class="form-control m-b" id="a" disabled>
<option value="0" data-id="0">請選擇區</option>
</select>
</div>
</div>
</div>
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
var area_url = "{:url('tools/area')}";
$(function(){
//省市區,三級聯動 ---- begin -----
$("#p").change(function(){
var pid = $(this).find("option:selected").attr('data-id');
//已經選擇了省份，又不選擇省份，改變屬性
if( '0' == pid){
$("#pname").val('不限區域');
$("#c").html('<option value="0" data-id="0">選擇城市</option>').attr('disabled', true);
$("#a").html('<option value="0" data-id="0">選擇區</option>').attr('disabled', true);
}
if('0' == pid){
return ;
}
$.post(area_url, {'code' : pid}, function(res){
if(1 == res.code){
var _html = '<option value="0" data-id="0">選擇城市</option>';
$.each(res.data, function(k, v){
_html += '<option value="' + v.name + '" data-id="' + v.id + '">' + v.name + '</option>';
});
$('#c').html(_html);
}
}, 'json');
$("#c").removeAttr('disabled'); //去除不可選狀態
$("#a").html('<option value="0" data-id="0">選擇區</option>').attr('disabled', true);
});
$("#c").change(function(){
var cid = $(this).find("option:selected").attr('data-id');
//已經選擇了城市，又不選擇城市，改變屬性
if( '0' == cid){
$("#cname").val('');
$("#a").html('<option value="0" data-id="0">選擇區</option>').attr('disabled', true);
}
if( '0' == cid ){
return ;
}
$.post(area_url, {'code' : cid}, function(res){
if(1 == res.code){
var _html = '<option value="0" data-id="0">選擇區</option>';
$.each(res.data, function(k, v){
_html += '<option value="' + v.name + '" data-id="' + v.id + '">' + v.name + '</option>';
});
$('#a').html(_html);
}
}, 'json');
$("#a").removeAttr('disabled'); //去除不可選狀態
});
$("#a").change(function(){
var aid = $(this).find("option:selected").attr('data-id');
if('0' == aid){
$("#aname").val('');
}
});
//---- end -----
});
</script>
</body>
</html>
~~~
效果如下：
