js渲染select下拉列表数据

谁借莪１个温暖的怀抱￠ 2024-04-18 08:10 81阅读 0赞

# HTML（使用了layui） #

# 后台返回的json格式 #

{
        "success": true,
        "msg": "查询项目分类成功",
        "data": [
            {
                "id": 1,
                "name": "校庆基金"
            },
            {
                "id": 2,
                "name": "教学设施"
            },
            {
                "id": 3,
                "name": "公益慈善"
            },
            {
                "id": 4,
                "name": "人才培养"
            },
            {
                "id": 5,
                "name": "实验室建设"
            }
        ],
        "code": 0,
        "count": 5
    }

# 渲染数据的js（使用了layui） #

$(function () {
    		layui.use(['form','layer'], function() {
    			var form = layui.form;
    			var layer = layui.layer;//弹层
    			selectRoleName();
    		})
    	})
    	function selectRoleName(){
    		$.ajax({
    			type:'POST',
    			url:'/projecttype/queryTypeList',
    			dataType:"json",
    			success: function(data){
    				if(data.success){
    					var add=document.getElementById("projectType");
    					for(var i=0;i<data.data.length;i++){
    						var option=document.createElement("option");
    						option.id=data.data[i].id;
    						option.innerText=data.data[i].name;
    						add.append(option);
    						layui.form.render('select')
    					}
    				}else{
    					layer.msg('暂时没有分类，请新建项目分类')
    				}
    			}
    		});
    	}

# 修改页面回显分类的js（用到了jquery） #

//判断是添加页面还是修改页面
        var isUpdateHtml=parseUrl();
    
        if(isUpdateHtml){
            //获取项目id
            var id = getQueryVariable("projectId");
            //回显项目分类
            huixian();
            function huixian(){
                $.ajax({
                    type: "post",
                    url: "/project/queryProjectByIdToProtal",
                    data:{
                        id : id
                    },
                    success: function(result){
                        if(result.success){
                            //回显项目分类
                            $("#"+String(result.data.typeid)).prop("selected",true);
                            form.render();
                        }
                    },
                    error:function () {
    
                    }
                });
            }
        }