本文共 3538 字，大约阅读时间需要 11 分钟。

效果图就是这样的

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

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>	}

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