联系官方销售客服
1835022288
028-61286886
使用layui组件和自定义控制器去实现联动菜单。方便二次开发,要更换select下拉框的样式可以看看,可以用在表单或者自定义控制器去使用。
php部分,用来去分类查找一级菜单对应的二级菜单内容 public function areaInfo(){ $id = $_GET['id']; if ($id > 0) { $data = \Phpcmf\Service::M()->db->table('linkage_data_1') ->select('id,name') ->where('pid', $id) ->get()->getResultArray(); return json_encode($data); }else if ($id == 'undefined' || $id == ' '){ $data = \Phpcmf\Service::M()->db->table('linkage_data_1') ->select('id,name') ->where('pid', 0) ->get()->getResultArray(); return json_encode($data); } } html部分 <div class="layui-form-item"> <label class="layui-form-label">实际居住地</label> <div class="layui-input-inline"> <select name="data[residence]" lay-filter="province" id="province"> <option value="">请选择省份</option> </select> </div> <div class="layui-input-inline"> <select name="data[residence]" lay-filter="city" id="city"> <option value="">请选择市</option> </select> </div> <div class="layui-input-inline"> <select name="data[residence]" id="county"> <option value="">请选择县/区</option> </select> </div> </div> layui.use(['layer', 'form','jquery'], function () { var $= layui.jquery; var form = layui.form; //如果有加载页面就渲染第一个一级分类的话 就先调用一次方法 renderSelecte($('#province')[0]); //监听一级分类下拉框变化 form.on('select(province)',function(res){ //变化就渲染第二个分类 把第一个下拉框的value传递 renderSelecte($('#city')[0],res.value); }); //监听二级分类下拉框变化 form.on('select(city)',function(res){ //变化就渲染第二个分类 把第一个下拉框的value传递 renderSelecte($('#county')[0],res.value); }); function renderSelecte(ele,id){ //先判断id是否有值,这里是为了第一个下拉框改变值的时候 好把第二个下拉框的选项都删掉 if(id){ ele.length=0; } var areaData = ''; $.ajax({ url: "",//要进行查询的地址 type: "GET", dataType: "json", async:false, success: function(data){ areaData = data; }}); areaData.forEach((item,index)=>{ var option =new Option(item.name,item.id); ele.append(option); }); //渲染一下表单 form.render(); } });
学习学习!!
学习学习
学习一下,感谢分享!
学习学习学习学习
学习学习
非常帅非常帅!!!!!!!!!
学习学习
学习学习
学习学习
学习学习