效果图就是这样的
第一级是机械的分类,第二级是机械,第三级是机械名称下的规格。
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>
}
花里胡哨的三级联动就完成啦~