具体请看（https://fly.layui.com/extend/interact/）
1.HTML页面
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<form class="layui-form layui-form-pane" action="" method="post">
<div class="layui-form-item test-region"></div>
</form>
2.php 方法
public function pro_sub(){
$pro_subs = ProSUBModel::all()；
return json($pro_subs);
}
3.JS
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
layui.config({
base: '/static/js/', //引用下面的 interact.js文件
})
// 联动项
layui.use(['interact','form'],function(){
var interact = layui.interact;
var form = layui.form;
// var a = $.get("{:url('test/pro_sub')}",function (b) { // 接收数据 一
// var data = b;
// console.dir(data )
// })
var data = [];
$.get("{:url('test/pro_sub')}",function (b) { // 接收数据 二
data = b;
//console.dir(data )
/* interact.render({
elem : '.test-region',
title : '选择联动',
data : data,
name : 'region',
});
interact.render({
elem : '.test-region1',
title : '选择省市区',
data : data,
name : 'region1',
hint : ['专业','科目'],
});
interact.render({
elem : '.test-region2',
title : '选择联动',
data : data,
name : 'region1',
hint : ['专业','科目'],
});*/
interact.render({
elem : '.test-region',
title : '专业科目',
data : data,
name : 'pro_sub',
selected : [1,4], // selected : [1,4,11], 三级
hint : ['专业','科目'],
});
});
</script>
- 建个js文件 名为（interact.js），把以下内容复制进去
layui.define("form", function(exports) {
var MOD_NAME = "interact",
o = layui.jquery,
form = layui.form,
elems = [],
hints = [],
datas = [],
events = [],
interact = function() {};
interact.prototype.on = function(event, callback) {
events.push(event);
return layui.onevent.call(this, MOD_NAME, event, callback)
};
interact.prototype.render = function(e) {
datas.push(this.data(e.data));
elems.push(e.elem);
hints.push(e.hint ? e.hint : "");
this.template(e)
};
interact.prototype.template = function(e) {
var t = this,
arr = ['<label class="layui-form-label">' + e.title + "</label>"],
hint = e.hint ? e.hint : ["请选择"];
if(e.selected) {
t.selected(e, arr, hint)
} else {
o.each(hint, function(idx, value) {
var options = (idx == 0 ? t.options(e, 0).join("") : "");
arr.push('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + value + "</option>" + options + "</select></div>")
})
}
o(e.elem).html(arr.join(""));
t.refresh(e)
};
interact.prototype.select = function(e, obj, value) {
var t = this,
index = t.curr_idx(obj),
otl = obj.parents(".layui-input-inline"),
ot = otl.next();
if(value !== "" && (!datas[t.curr_idx(obj)][value] || !datas[index][value].length)) {
otl.nextAll().remove();
return false
}
ot.length && otl.nextAll().find("select option:not(option:first)").remove();
if(value !== "") {
var i = otl.index();
if(!ot || !ot.length) {
ot = otl.after('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + (hints[index] && hints[index][i] ? hints[index][i] : "请选择") + "</option></select></div>").next()
}
var options = [ot.find("option:first").prop("outerHTML")];
ot.find("select").html(t.options(e, value, options, obj).join(""))
}
t.refresh(e)
};
interact.prototype.selected = function(e, arr, hint) {
var t = this;
e.selected.unshift(0);
o.each(e.selected, function(idx, value) {
if(idx < e.selected.length - 1) {
var options = "";
o.each(t.data(e.data)[value], function(index, item) {
options += '<option value="' + item.id + '" ' + (item.id == e.selected[idx + 1] ? "selected" : "") + ">" + item.title + "</option>"
});
arr.push('<div class="layui-input-inline"><select name="' + e.name + '[]"><option value="">' + (hint[idx] ? hint[idx] : "请选择") + "</option>" + options + "</select></div>")
}
});
return arr
};
interact.prototype.options = function(e, value, arr, obj) {
var t = this;
arr = arr ? arr : [];
o.each(datas[t.curr_idx(obj)][value], function(idx, item) {
arr.push('<option value="' + item.id + '">' + item.title + "</option>")
});
return arr
};
interact.prototype.refresh = function(e) {
var t = this;
form.render();
o(elems.join(",")).find(".layui-anim dd").click(function() {
var obj = o(this),
value = obj.attr("lay-value"),
filter = obj.parents("[lay-filter]");
t.select(e, obj, value);
return filter ? layui.event.call(this, MOD_NAME, "interact(" + filter.attr("lay-filter") + ")", {
elem: obj.parents(".layui-input-inline").find("select option[value=" + value + "]"),
othis: obj,
value: value,
text: obj.text()
}) : ""
})
};
interact.prototype.curr_idx = function(obj) {
var idx = 0;
if(obj) {
var cls = obj.parents(".layui-form-item").attr("class").replace("layui-form-item ", "");
idx = elems.findIndex(function(val) {
return val == "." + cls
})
}
return idx
};
interact.prototype.data = function(data) {
var arr = [];
o.each(data, function(index, item) {
if(!arr[item.pid]) {
arr[item.pid] = []
}
arr[item.pid].push(item)
});
return arr
};
exports(MOD_NAME, new interact())
});