這兩天做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');
}
});
整個新增與修改回顯就完成了