layui框架----下拉框的二级联动

一、layui.use

这里layui的官方文档：https://www.layui.com/doc/
layui这个框架采用的是经典模块化
layui的内置模块不是默认就加载好的，必须要执行启动模块的这种方法后模块才会加载。
layui.use就是一种加载模块的方式
如上代码

layui.use(['form', 'layer','laydate'],function(){
		$ = layui.jquery;  //获取jquey模块
        var form = layui.form, //获取form模块
            laydate = layui.laydate, //获取laydate模块
            layer = layui.layer; //获取layer模块
})

这个加载了layui的form、layer、laydate、模块

二、form.on事件监听

默认下，事件所监听的是全部form模块元素，如果只想监听某一个元素，可以使用事件过滤器lay-filter

<select id="classify" name="classify" lay-filter="classify"></select>

form.on('select(classify)',function (){})

三、代码（此时再看下面代码）

<select id="classify" name="classify" lay-filter="classify">
        <option value="0" text="请选择">请选择</option>
        <option th:each="t:${aDicClassifies}" th:value="${t.classify}" th:text="${t.classify}">${t.classify}</option>
</select>

<script type="text/javascript">
//启动模块
	layui.use(['form', 'layer','laydate'],function() {
		 $ = layui.jquery;
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer;
		form.on('select(classify)',function (data) {
		//监听到了下拉框选择的选项，传递过来
	            // console.log(data);//在控制台输出信息
	            var classfies = data.value;
	            // console.log(classfies);
	    //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
	            $.ajax({
	                type:"post",
	                url:"/a_dic_appendantName/aDicAppendantname/getType",
	                data:{"classfies":classfies},
	                dataType:"json",
	                success:function (d) {
	                    // layer.alert(1122)
	                //对应的值传回，拼出html下拉框语句    
	                    var tmp='<option value="">请选择</option>';
	                    for (var i in d){
	                        tmp +='<option value="'+d[i].type+'">'+d[i].type+'</option>';
	                    }
	                    $("#type").html(tmp);
	                    form.render();
	                },error:function () {
	                    layer.alert('请求失败');
	                }
	            });
	        })
	});
</script>

欢迎加入京东内购羊毛群一手羊毛消息：谢谢支持