pHpthinkphp5+layui实现四级联动

发布时间:2025-07-09 点击:6
<divclass="layui-form-itemlayui-form-pane"> <labelclass="layui-form-label">城市联动</label> <divclass="layui-input-inline"> <selectname="province"lay-verify="required"lay-search=""lay-skin="select"lay-filter="province"> <optionvalue="">请选择省</option> <foreachname="arealist"item="v"> <optionvalue="{$v.id}">{$v.area_name}</option> </foreach> </select> </div> <divclass="layui-input-inline"> <selectname="city"lay-verify="required"lay-search=""lay-skin="select"lay-filter="city"id="city"> <optionvalue="">请选择市/县</option> </select> </div> <divclass="layui-input-inline"> <selectname="area"lay-verify="required"lay-search=""lay-skin="select"lay-filter="area"id="area"> <optionvalue="">请选择镇区</option> </select> </div> <divclass="layui-input-inline"> <selectname="area"lay-verify="required"lay-search=""lay-skin="select"lay-filter="street"id="street"> <optionvalue="">请选择街道</option> </select> </div> </div>html 部分
<script> layui.use(['form','layedit','laydate'], function(){ var$=layui.jquery, form=layui.form, layer=layui.layer, layedit=layui.layedit, laydate=layui.laydate; //监听省份选择 form.on('select(province)', function(data){ $('#city').html('<optionvalue="">请选择市/县</option>'); $('#area').html('<optionvalue="">请选择镇区</option>'); $('#street').html('<optionvalue="">请选择街道</option>'); $.ajax({ url:"{:u('admin/getchildarea')}", data:{ parent_id:data.value }, type:'post', datatype:'json', success:function(data1){ if(data1.error==0){ $("#city").append(data1.option); form.render('select');//刷新select选择框渲染 } } }); }); form.on('select(city)', function(data){ $('#area').html('<optionvalue="">请选择镇区</option>'); $('#street').html('<optionvalue="">请选择街道</option>'); $.ajax({ url:"{:u('admin/getchildarea')}", data:{ parent_id:data.value }, type:'post', datatype:'json', success:function(data1){ if(data1.error==0){ $("#area").append(data1.option); form.render('select');//刷新select选择框渲染 } } }); }); //监听省份选择 form.on('select(area)', function(data){ $('#street').html('<optionvalue="">请选择街道</option>'); $.ajax({ url:"{:u('admin/getchildarea')}", data:{ parent_id:data.value }, type:'post', datatype:'json', success:function(data1){ if(data1.error==0){ $("#street").append(data1.option); form.render('select');//刷新select选择框渲染 } } }); }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(json.stringify(data.field),{ title:'最终的提交信息' })returnfalse; }); }); </script>js部分
publicfunctionloudong(){ $ld_id=input('post.parent_id'); $where['district_id']=$ld_id; $area=db('表名')->field('id,name')->where($where)->select(); if($area){ $option='<optionvalue=""></option>'; foreach($areaas$key=>$value){ $option.='<optionvalue="'.$value['id'].'">'.$value['name'].'</option>'; } echojson_encode(array('error'=>0,'option'=>$option)); }else{ echojson_encode(array('error'=>1)); } }php部分
可以实现无限级分类~


奉贤网站SEO优化对企业推广有哪些好处?
云计算应用中的7个常见问题及其解决方法
标题的长度对网站SEO优化有什么危害
重庆SEO优化:网站为什么仍没有排名
小红书推广之关键词排名规则与方法
浅析:搜索引擎如何排名一个页面?
企业如何选择适合自己的网站类型
网页设计中的“负空间”,你还不知道吗?