php二级联动php手把手教你做网站十添加文章分类多级联动

文章分类：触发父级分类通过ajax显示二级分类，依次类推，可以实现无限级联动

图1 无限级分类样式

<tr>

php二级联动php手把手教你做网站十添加文章分类多级联动 Ruby

</select>

</div>

</td>

</tr>

前边先容了layui的监听form.on('select(myselect)', function(data){})，这里先容jquery ajax

//由于通过ajax获取显示的 select没有办法触发焦点这里换另一个办法操作select

先解释一下思路：

先获取select下选择的value；获取的value作为参数通过ajax获取下级分类的list 以html的形式返回，可以直接append到分类box里边；由于样式是layui渲染过的，以是append 加入往后要重新渲染，实行form.render();；点击第一个或者第二个的时候，要把后边的select移除，这就哀求我们获取点击的是第几个select，获取select总数，然后for循环remove后边的select，我是select放到了<div class="layui-input-inline">用到了layui的布局。
以是直接移除该div，由于渲染的也是放到了该div内，也就不须要重新form.render();；表中多级分类的创建，所有分类放到一个表，添加一个parentid字段，二级分类添加的时候parentid存入一级分类的ID编号，读取二级分类的时候：

$list=Db::name('web_cat')->field()->where('parentid=一级分类的编号')->order()->select();

把稳：循环的时候该当是先删除末了一个，也便是利用--，而不是++，比如删除4,5个，如果是++，删除了4，第5个就变成了4，再移除5 就没有了，会出错；

for(i=scount-1;i>=anum;i--){$('.catlist').find('.layui-input-inline').eq(i).remove();}

由于后边的select是通过ajax获取添加的，change事宜没法获取焦点，这里利用

$(document).delegate(".catlist", 'change', function() ；

代码如下：

我的下拉菜单放到了class =‘catlist’的单元格内

$(document).delegate(".catlist", 'change', function() {var carid=$(this).children('option:selected').val();//获取option value//还须要获取change的是第几个select 以便把后边的移除,适宜多级分类，//也须要知道当前总的select个数var anum=$('.catlist').find('.layui-anim-upbit').index($(this).parent());//每一个select 对应了一个<div class="layui-input-inline">var scount=$('.catlist').find('select').length;//移除当前点击的后边的selectfor(i=scount-1;i>=anum;i--){$('.catlist').find('.layui-input-inline').eq(i).remove();}var picurl="这里是吸收数据的URL";$.ajax({url: picurl,data: {'carid':carid},type: 'post',dataType: 'json',success: function(result) {if (result.error == "0000") {console.log(result.msg);$(".catlist").append(result.msg);//这里须要重新渲染form 可以理解为便是form中的样式重新刷新form.render();}}});})

贴一下layui的监听代码吧，方便须要的朋友利用

<script>layui.use('form', function(){ var form = layui.form; form.on('select(myselect)', function(data){ //监听form内的 select 针对lay-filter="myselect" var p1=data.value;//获取下拉的value值其他获取第几个总得个数，移除 ajax调用等和上边一样，不再重复 form.render();})</script>

总结：利用了layui，除了打开页面要实行form.render();我们每次添加到form里边的是html格式，也要重新渲染。