layui下拉框获取值与数据回显

这两天做layui的框架项目碰到了下拉框动态赋值与回显，给大家分享一下
新增：

添加

我的添加功能是触发modelAdd
2级联动

layui.use(['form', 'upload', 'table','common', 'element', 'laypage'], function () {const $ = layui.jqueryconst table = layui.tableconst common = layui.commonconst layer = layui.layerconst upload = layui.uploadconst form = layui.formconst element = layui.elementconst laypage = layui.laypage$("#downloadAdd").click(function () {layer.open({type: 1,title: "上传文件",skin: 'layui-layer-rim',area: ['500px', '600px'],content: '\n' +'    
\n' +'		 \n' +'			文件类别 \n' +'			 \n' +'  				 \n' +'    				选择类型 \n' +'  				 \n' +'			 \n' +'		 \n' +'		 \n' +'			选择分类 \n' +'			 \n' +'  				 \n' +'    				选择类型 \n' +'  				 \n' +'			 \n' +'		 \n' +'        \n' +'            保存\n' +       '		 \n' +'    
\n' +''});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: '\n' +'    
\n' +                 '		 \n' +'			文件类别 \n' +'			 \n' +'  				 \n' +'    				选择类型 \n' +'  				 \n' +' \n' +'			 \n' +'		 \n' +'		 \n' +'			选择分类 \n' +'			 \n' +'  				 \n' +'    				选择类型 \n' +'  				 \n' +'			 \n' +'		 \n' +'        \n' +'            保存\n' +       '		 \n' +'    
\n' +''})//类别循环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');}});

整个新增与修改回显就完成了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！