layui 三级联动（超级花里胡哨）

效果图就是这样的

第一级是机械的分类，第二级是机械，第三级是机械名称下的规格。

1.html的代码，要加上lay-filter作为监听

		<div class="layui-form-item">
			    <label class="layui-form-label">机械名称<span class="required">*</span></label>
			    <div class="layui-input-inline">
			      <select id="categoryid" name="categoryid" lay-filter="categoryChange">
			        <option value="">--机械分类--</option>
			      </select>
			    </div>
			    <div class="layui-input-inline">
			      <select id="machineid" name="machineid" lay-filter="machineChange" >
			        <option value="">--机械名称--</option>
			      </select>
			    </div>
			    <div class="layui-input-inline">
			      <select id="modelid" name="modelid">
			        <option value="">--规格不限--</option>
			      </select>
			    </div>
			  </div>

2.js的代码，在layui里面的监听要写上，监听 select 切换事件

layui.use(['form', 'laydate', 'element', 'upload'], function(){
		form = layui.form;
		var laydate = layui.laydate;
		var element = layui.element;
		var upload = layui.upload;
		loadMachineSelectData('category');
		getById();
		// 监听机械select切换事件
		form.on('select(categoryChange)', function(data){
			loadMachineSelectData('machine', data.value);
		});
		form.on('select(machineChange)', function(data){
			loadMachineSelectData('model', data.value);
		});
	});

3.从后台获取数据

var machineObj = {
		category:{
			url:"${webContext}/manage/machineCategory/getPage.json?limit=10000",
			selectEle:"#categoryid",//选择的dom
			emptyEle:"#categoryid [value!=''],#machineid [value!=''],#modelid [value!='']",//需要清空的dom
			valField:'id',
			textField:'name',//遍历显示的名称
		},
		machine:{
			url:"${webContext}/manage/machine/getPage.json?limit=10000",
			selectEle:"#machineid",
			emptyEle:"#machineid [value!=''],#modelid [value!='']",
			valField:'id',
			textField:'machinename',
			queryField:'categoryid',
		},
		model:{
			url:"${webContext}/manage/machineItem/getPage.json?limit=10000",
			selectEle:"#modelid",
			emptyEle:"#modelid [value!='']",
			valField:'id',
			textField:'model',
			queryField:'machineid',
		},
	}

4.渲染数据

function loadMachineSelectData(type, upData, selectVal) {
		if (type && machineObj[type]) {
			var obj = machineObj[type];
			$(obj.emptyEle).remove();
			var queryData = {};
			if (upData && obj.queryField) {
				queryData[obj.queryField] = upData;
			}
			if (!upData && type != 'category') {
				form.render('select');
				return
			}
			$.ajax({ type : "post", url : obj.url, data : queryData,
				success : function(data) {
					var list = data.data;
					if (list && list.length > 0) {
						$.each(list, function (i, item) {
							var option = $("<option></option>");
							option.attr("value",item[obj.valField]);
							option.text(item[obj.textField]);
							$(obj.selectEle).append(option);
						});
					}
					if (selectVal) {
						$(obj.selectEle).val(selectVal);
					}
					form.render('select');
				}
			});
		}
	}

5.数据的回显

function getById () {
		<#if (params.id)??>
			$.ajax({
			    url: '${webContext}/manage/leaseInfo/getById.json',
			    data:{id:"${params.id}"},
			    success: function (data) {
			       var record = data.data;
	               for (var key in record) {
	                  $("#" + key).val(record[key]);                 
	               }
	               if (record.categoryid) {
	            	   loadMachineSelectData('category', null, record.categoryid);
	               }
	               if (record.machineid) {
	            	   loadMachineSelectData('machine', record.categoryid, record.machineid);
            	   	   loadMachineSelectData('model', record.machineid, record.modelid);
	               }
	               form.render();
			    }
			});
		</#if>
	}

花里胡哨的三级联动就完成啦~