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

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

     

        

            添加
        
        
        

        
     

我的添加功能是触发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: '
\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');
            	}
        	});

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