Layui动态添加下拉选项值以及根据后台返回数据默认选中某项值的功能 以及回显到表格上转变id为label值功能

 上代码

//html
<div class="layui-form-item " style="width:calc(100% - 55px)">
	<label class="layui-form-label">施工单位:<span class="star">*</span>:</label>
	<div class="layui-input-block">
		<select id="projectBudgetedMoney" name="projectBudgetedMoney" class="search-input">
			<option value="">请选择标签分类</option>
		</select>
	</div>
</div>

//js
// 获取施工单位额
function getList() {
    $.ajax({
        type: "get",
        url: getBuildingUnitsList,
        async: false,
        headers: {
            'Content-Type': 'application/json',
            'dm-authorize-token': $.cookie("token"),
        },
        success: function (res) {
            if (res.data) {
                for (var a = 0; a < res.data.length; a++) {
                    $("#projectBudgetedMoney").append('<option value="' + res.data[a].value + '" label="' + res.data[a].name + '">' + res.data[a].name + '</option>');
        //标记点！！！！！！！！！！！！！！！！！！！！！！！！
        //...........
        //！！！！！！！！！！！！！！！！！！！！！！！！！！！
                }
            } else {
                layer.msg(e.msg);
            }
        },
        error: function (e) {
            layer.msg(e.msg);
        }
    });
}

获取下拉框数据列表直接渲染动态生成到下拉框数据就好

二 根据后台返回的数据进行选中默认值（回显）

第一种方法：

       form.val("form", {
                    "projectWriteBy": data.writeBy,
                    "projectWriteTime": data.writeTime,
                    "projectTitle": data.title,
//举个例子 这个type就是返回的数据 自己用layui方法赋值给表单中name等于projectBudgetedMoney的输入框
                    "projectBudgetedMoney": data.你后台的字段值,
                })

不知道layui from表单赋值的方法 参考我之前文章 layui 基础

第二种方法：

             // 下拉框回显
                // $('#type').val(data.type)
                // $('#type option').each(function () {
                //     if ($(this).val() == data.type) {
                //         $(this).prop("selected", true);
                //         form.render('select');
                //     }
                // });

举个例子啊  $('#type').val(data.type) 就是你下拉框直接把后台值付给他 再遍历所有选项....大家应该都能看懂

三，修改回显到表格上的字段

我们一般上传到后台的一般都是选中选项的id值 后台有时候不给我们处理 我们展示到表格的也是id值

 就是这样这样怎么处理呢

首先，我们需要在函数中获取后台返回的ID与对应文字的映射关系，保存到一个对象中。然后，在"项目类型"的列中使用templet来展示对应的文字内容：

还是拿上面例子举例

// 获取后台返回的ID与对应文字的映射关系，保存在一个对象中
var projectTypeMap = {};
// 获取施工单位额
function getList() {
    $.ajax({
        type: "get",
        url: getBuildingUnitsList,
        async: false,
        headers: {
            'Content-Type': 'application/json',
            'dm-authorize-token': $.cookie("token"),
        },
        success: function (res) {
            if (res.data) {
                for (var a = 0; a < res.data.length; a++) {
                    $("#projectBudgetedMoney").append('<option value="' + res.data[a].value + '" label="' + res.data[a].name + '">' + res.data[a].name + '</option>');

                    //将数据对应的关系放入
                    let id = res.data[a].value;
                    let text = res.data[a].name;
                    projectTypeMap[id] = text;

                }
            } else {
                layer.msg(e.msg);
            }
        },
        error: function (e) {
            layer.msg(e.msg);
        }
    });
}

 表格展示用templet函数

       {
                    field: 'buildDept', title: '施工单位', templet: function (d) {
                        var typeId = d.buildDept;
                        return projectTypeMap[typeId] || ''; // 如果找不到对应的文字内容，返回空字符串
                    }
                },