这两天做layui的框架项目碰到了下拉框动态赋值与回显，给大家分享一下
新增：
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layui-btn-group">
<button id="modelAdd" class="layui-btn data-add-btn">添加</button>
</div>
<table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>
<div id="laypage"></div>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
我的添加功能是触发modelAdd
2级联动
layui.use(['form', 'upload', 'table','common', 'element', 'laypage'], function () {
const $ = layui.jquery
const table = layui.table
const common = layui.common
const layer = layui.layer
const upload = layui.upload
const form = layui.form
const element = layui.element
const laypage = layui.laypage
$("#downloadAdd").click(function () {
layer.open({
type: 1,
title: "上传文件",
skin: 'layui-layer-rim',
area: ['500px', '600px'],
content: '<div style="padding: 20px">\n' +
' <form class="layui-form" enctype="multipart/form-data">\n' +
' <div class="layui-inline"> \n' +
' <label class="layui-form-label">文件类别</label> \n' +
' <div class="layui-input-inline"> \n' +
' <select id="modelId" name="modelId" lay-filter="modelId" lay-search="" required lay-verify="required"> \n' +
' <option value="">选择类型</option> \n' +
' </select> \n' +
' </div> \n' +
' </div> \n' +
' <div class="layui-inline"> \n' +
' <label class="layui-form-label">选择分类</label> \n' +
' <div class="layui-input-inline"> \n' +
' <select id="categoryId" name="categoryId" lay-filter="categoryId" lay-search="" required lay-verify="required"> \n' +
' <option value="">选择类型</option> \n' +
' </select> \n' +
' </div> \n' +
' </div> \n' +
' <div style="text-align: center;margin-top: 30px;">\n' +
' <button class="layui-btn layui-btn-normal" id="commit" lay-submit lay-filter="add_download">保存</button>\n' +
' </div>\n' +
' </form>\n' +
'</div>'
});
common.ajaxPost(layui.cache.host + '/model/getByModelName', null, function(res) { //封装的ajax你们可以自己写。调用一级下拉列表获取数据
if (res.code == '0000') {
for (var i = 0; i < res.data.length; i++) {
$('#modelId').append(new Option(res.data[i].modelName, res.data[i].mid)); //将数据放到option中
}
}
form.render('select');//重新渲染下拉框，如果不重新渲染下拉框是不出来的
});
form.on('select(modelId)', function (data) { //二级下拉框
debugger;
modelId= data.value; //获取一级下拉框的value值
if(modelId !=null || modelId != ""){
$("#categoryId").empty(); //清空二级下拉框列表值
common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelId}, function(res) { //查询二级下拉框列表值，根据一级选的值
if (res.code == '0000') {
for (var i = 0; i < res.data.length; i++) {
$('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid)); //将数据放到二及下拉中
}
}
form.render('select');//重新渲染下拉框
});
}else{
form.render('select');//如果一级不选择二级下拉没有值
}
});
});
修改回显：
layer.open({
type: 1,
title: "修改下载信息",
skin: 'layui-layer-rim',
area: ['500px', '560px'],
content: '<div style="padding: 20px">\n' +
' <form class="layui-form" enctype="multipart/form-data">\n' +
' <div class="layui-inline"> \n' +
' <label class="layui-form-label">文件类别</label> \n' +
' <div class="layui-input-inline"> \n' +
' <select id="modelId" name="modelId" lay-filter="modelId" lay-search=""required lay-verify="required" > \n' +
' <option value="">选择类型</option> \n' +
' </select> \n' +
'<input type="text" id="id" name="id" value="' + obj.data.id + '" style="display:none" class="layui-input"> \n' +
' </div> \n' +
' </div> \n' +
' <div class="layui-inline"> \n' +
' <label class="layui-form-label">选择分类</label> \n' +
' <div class="layui-input-inline"> \n' +
' <select id="categoryId" name="categoryId" lay-filter="categoryId" lay-search="" required lay-verify="required"> \n' +
' <option value="">选择类型</option> \n' +
' </select> \n' +
' </div> \n' +
' </div> \n' +
' <div style="text-align: center;margin-top: 30px;">\n' +
' <button class="layui-btn layui-btn-normal" id="commitUpdate" lay-submit lay-filter="update_download">保存</button>\n' +
' </div>\n' +
' </form>\n' +
'</div>'
})
//类别循环
common.ajaxPost(layui.cache.host + '/model/getByModelName', null, function(res) { //查询一级菜单
if (res.code == '0000') {
for (var i = 0; i < res.data.length; i++) {
$('#modelId').append(new Option(res.data[i].modelName, res.data[i].mid));//将数据放到option中
}
$("#modelId").each(function() { //回显关键
debugger;
$(this).children("option").each(function() { //循环读取
if (this.value == obj.data.modelId) { //进行比较
$(this).attr("selected","selected"); //选中
}
});
});
}
form.render('select');//重新渲染
});
var modelIds = obj.data.modelId;//这个地方是关键，获取列表的；一级菜单的值，因为要根据一级的id查询二级 obj.data.modelId是列表你点击修改将整条数据传过来的值
common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelIds}, function(res) {//查询二级
if (res.code == '0000') {
for (var i = 0; i < res.data.length; i++) {
$('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid));//赋值option
}
$("#categoryId").each(function() {//回显默认选中状态
debugger;
$(this).children("option").each(function() {
if (this.value == obj.data.categoryId) {
$(this).attr("selected","selected");
}
});
});
}
form.render('select');
});
form.on('select(modelId)', function (data) { //重新选中，跟添加的二级菜单一样
debugger;
modelId= data.value; //获取value值
if(modelId !=null || modelId != ""){
$("#categoryId").empty();
common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelId}, function(res) {
if (res.code == '0000') {
for (var i = 0; i < res.data.length; i++) {
$('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid));
}
}
form.render('select');
});
}else{
form.render('select');
}
});
整个新增与修改回显就完成了