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 }