省市縣三級聯動 · Thinkphp5工具箱

省市縣三級聯動，在項目中應用的很廣泛，也是很基礎的功能。雖然說基礎，其實其中還是包含一些小的問題，例如有一些新手做這個功能的時候，容易忽略：如果用戶選擇完省-市-縣三級的時候，回頭又重新選擇了省，此時就應該講市-縣選擇的內容清空。否則容易導致數據錯誤。現在我就用 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> ~~~ 效果如下： ![](https://box.kancloud.cn/7a17e8af3406f28aa140010ce14ceced_956x241.jpg) ![](https://box.kancloud.cn/de2197d57bdb004a1bdb4ea05909f7a2_949x209.jpg)