随心的博客

好记性不如个烂笔头，随心记录！

返回顶部

TP6+LayUI省市区级联菜单实现

 

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     }

 

posted @ 2021-10-27 17:31  yangphp  阅读(638)  评论(0)  编辑  收藏  举报