layui.use(["form", "jquery"], function() {
var form = layui.form;
form.on('select(children-select)', function(data){
// 三级联动
var id = data.value;
var parentDom = $(data.elem).parent().parent();
var categoryId = $(parentDom).prev("input[type=hidden]");
if (id != "") {
$(categoryId).val(id);
}
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
// 清空后面的
$(data.elem).parent().nextAll().remove();
$.ajax({
type: "POST",
url: "/backend/category/children/" + id,
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
success: function(msg){
if (msg.error == 0) {
var data = msg.msg;
console.log(data)
if (data.length > 0) {
var divDom = document.createElement("div");
divDom.className = "layui-col-xs3";
var selectDom = document.createElement("select");
selectDom.name = "select_category";
selectDom.setAttribute("lay-filter", "children-select");
var optonEmptyDom = new Option("请选择", "0");
selectDom.append(optonEmptyDom);
var selectHtml = "<div class='layui-col-xs3'><select name='select_category' class='form-control'>";
selectHtml += "<option>请选择</option>";
for(var i = 0; i < data.length; i++) {
var optonDom = new Option( data[i].name, data[i].id);
selectDom.append(optonDom);
}
divDom.append(selectDom);
$(parentDom).append(divDom);
form.render('select');
}
}
}
});
});
})
注意2点
1: select绑定lay-filter=name, name表示formn.on('select(name)', function(){})中的name。
2: 一定要用form.render('select')渲染