基于layui的select多级关联选择Ajax版级联选择

>很多网站的分类不是1级的，可能是2级或者3级，级联选择进行分类就尤为重要，这里我基于layui实现了一款级联选择器，方法比较笨拙，但是理解起来比较简单，相信入门级别的同学都能看懂，下面直接上教程了

###基于layui的select多级关联选择Ajax版级联选择

1：部署id选择器如下 html部分
```
<div class="layui-input-inline">
	<div id="cate1"></div>
</div>

<div class="layui-input-inline">
	<div id="cate2"></div>
</div>
```

我的是2级联动，所有我部署了2层id选择器，同学们根据自己的需要进行部署

2：js部分
```

layui.use('form', function(){
	var form = layui.form;
	//文章提交保存
	form.on('submit(info)', function(data){
		var url = "{:url('article/save')}";
		$.post(url,data.field,function (e) {
			if(e.code ==200){
				success(e.msg);
				setTimeout("location.reload()",2000);
			}else {
				error(e.msg);
			}
		})
		return false;
	});

//ajax获取分类数据
    function getCate(pid,name,id){
        var url = "{:url('article/get_cate')}";
        $.post(url,{pid:pid},function (e) {
            //console.log(e)
			var html="";
			var data = e.data;
			html += '<select name="cate_id" id="'+name+'_id" lay-filter="'+id+'" lay-verify="required">';
			html += '<option value="">请选择</option>';
			for (var i = 0;i<data.length;i++){
			    html += "<option  value='"+data[i].id+"'>"+data[i].name+"</option>";
			}
			if(data.length > 0){
				$("#"+id).html(html);
			}else {
				$("#"+id).children().remove();
			}
			html += '</select>';
			form.render();
        })

};
    getCate(0,'cate_id','cate1');

//目前系统无三级分类，故二级即可实现需求
    form.on('select(cate1)', function(data){
        //console.log(data.elem); //得到select原始DOM对象
        //console.log(data.value); //得到被选中的值
		//console.log(data.othis); //得到美化后的DOM对象
		getCate(data.value,"cate_id",'cate2')
    });
});
```

>说明： form.on('select(cate1)'函数

其中方法针对 form.on('select(cate1)'
由于我是2级联动，故只组要一次 词函数 其中 **cate1** 代表步骤1第二个中id值，即：获得值后，需要将组装完成的html，append到ID为cate1的html元素中
以此类推，如果您是3级联动则需要2个form.on('select(cate1)'函数

>说明： getCate(pid,name,id)函数

pid当前要请求的pid值，如我页面中初始加载这pid为0，加载第二层则传递第二层的id值
name 我们需要传递给后端的name属性，我的胃分类id 即：cate_id
id当获取到值后，将组合好的html，append到对应的id下组成下拉选择框select

结语：本教程可能真正使用到的人员不是很多，但是希望对有需要的人起到帮助作用。

注:原创不易,转载请注明出处( https://micuu.com/new/454.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。