TP6+LayUI省市區級聯選單的實現：

效果為：選擇省份，城市自動載入

HTML：

 1 <div class="layui-inline layui-show-xs-block">
 2                                    <select name="province_id"  id="province_id" lay-filter="cityFilter">
 3                                       <option value="">省份</option>
 4                                       {foreach $province_list as $val}
 
 5                                       <option value="{$val.region_id}" {if $val.region_id == $province_id}selected{/if}>{$val.region_name}</option>
 6                                       {/foreach}
 7                                    </select>
 8                                 </
 
div>
 9 
10                                 <div class="layui-inline layui-show-xs-block">
11                                    <select name="city_id" id="city_id" >
12                                       <option value="">請選擇城市</option>
13                                       {foreach $city_list as $val}
 
14                                       <option value="{$val.region_id}" {if $val.region_id == $city_id}selected{/if}>{$val.region_name}</option>
15                                       {/foreach}
16                                    </select>
17                                 </div>

JS程式碼：

 1 //select 監聽
 2             form.on('select(cityFilter)',function(data){
 3                 var value=data.value;  //select選中的值
 4                
 5                 var sub_url = "/admin/setting/regionCitys";
 6                 $.post(sub_url,{province_id:value},function(redata){
 7                     if(redata.status == 'SUCCESS')
 8                     {
 9                        $("#city_id").empty();
10                        $("#city_id").append(new Option("請選擇城市", ""));
11 
12                        $.each(redata.data, function(index, item) {
13                         //賦值
14                             $('#city_id').append(new Option(item.region_name, item.region_id));
15                         });
16                     }
17                     else
18                     {
19                        $("#city_id").append(new Option("介面錯誤", ""));
20                     }
21 
22                     layui.form.render("select");
23                 },'json');
24 
25             });

控制器程式碼：

 1 /**
 2      * 獲取城市
 3      */
 4     public function regionCitys()
 5     {
 6         $province_id = request()->param('province_id');
 7 
 8         $city_list = Db::name('yphp_system_region')->where('region_type',2)->where('parent_id',$province_id)->order('region_name', 'ASC')->select();
 9 
10         return json(array('status'=>'SUCCESS','data'=>$city_list));
11 
12     }
13 
14     /**
15      * 獲取區域
16      */
17     public function regionAreas()
18     {
19         $city_id = request()->param('city_id');
20 
21         $area_list = Db::name('yphp_system_region')->where('region_type',3)->where('parent_id',$city_id)->order('region_name', 'ASC')->select();
22 
23         return json(array('status'=>'SUCCESS','data'=>$area_list));
24 
25     }

蠻掛著看看，沒準有驚喜呢，當然了寫文章並不是為了賺打賞錢，最主要目的是更好的記錄！

本文來自部落格園，作者：yangphp，轉載請註明原文連結：https://www.cnblogs.com/ypeih/p/15471839.html