TP6+LayUI省市區級聯菜單實現

本文轉載自查看原文 2021-10-27 17:31 91 ThinkPHP

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     }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 antd省市區級聯基於layui的select change事件ajax響應（主要用於省市區級聯響應，其他的只要修改一下也可適應） layui省市區三級聯動 layui省市區三級聯動城市選擇 jQuery省市區三級聯動菜單 Vue Element UI 中國省市區級聯數據---npm install element-china-area-data -S 省市區三級聯動 ElementUI——級聯和樹形省市區省市區三級聯動菜單（附數據庫）省市區三級聯動（附j全國省市區json文件）