前端表格添加下拉框并修改值并传回后端

 表格直接formatter return方法：

{
      field: 'opsId',
      title: '移送单位',
      formatter: function (value, row, index) {
            return buildSelectDropdown(value);
      },
},

方法：

    function buildSelectDropdown(value) {
        var selectHtml = '<select class="form-control">';
        if (value == null) {
            selectHtml += '<option value="">请选择运营单位</option>';
        }
        // 遍历 unitInfo 中的数据，动态添加 option 元素
        Object.keys(unitInfo).forEach(function(key) {
            var displayText = unitInfo[key];
            var isSelected = (key == value) ? 'selected' : ''; // 判断是否为当前值，设置选中状态
            selectHtml += '<option value="' + key + '" ' + isSelected + '>' + displayText + '</option>';
        });
        selectHtml += '</select>';

        return selectHtml;
    }

同时监听下拉框：

    window.onload = function() {
        // 调用方法，监听下拉框的变化事件
        handleSelectChange();
    };

监听方法：

    // 定义方法，用于监听下拉框的变化事件
    function handleSelectChange() {
        $('#bootstrap-table').on('change', 'select.form-control', function() {
            var newValue = $(this).val(); // 获取下拉框的新选中值
            console.log(newValue);
            var rowIndex = $(this).closest('tr').data('index'); // 获取当前行的索引
            // 更新 Bootstrap Table 中对应单元格的内容
            $('#bootstrap-table').bootstrapTable('updateCell', {
                index: rowIndex,
                field: 'opsId', // 指定要更新的字段
                value: newValue // 更新字段的新值
            });
        });
    }

提交过程中的数据校验（不为空）：

        // 获取 Bootstrap Table 实例
        var table = $('#bootstrap-table');
        // 获取表格中所有行的数据
        var tableData = table.bootstrapTable('getData');
        // 提取 unitId 列的数据
        var opsIds = tableData.map(function(row) {
            return row.opsId;
        });
        var detailid = tableData.map(function(row) {
           return row.detailid;
        });

        // 拿到审核结果
        var selectedValue = $('input[type="radio"][name="status"]:checked').val();
        var submitContinue = true;
        if (selectedValue == 1) {       // 如果是审核通过则所有单位必须有对应的移送单位
            opsIds.forEach(function (opsId, index) {
                if (opsId == "请选择" || opsId == null) {
                    $.modal.msgWarning('请确保每行的“移送单位”都进行了有效选择！');
                    submitContinue = false;
                    return;
                }
            });
        }
        if (submitContinue == true) {
            // 使用 reduce 方法将多行数据组成一个 Map 对象
            var combinedMap = tableData.reduce(function(map, row) {
                var opsId = row.opsId;
                var detailId = row.detailid;
                map.set(detailId, opsId); // 将 detailId 作为键，opsId 作为值，添加到 Map 中
                return map;
            }, new Map());
            var jsonData = JSON.stringify([...combinedMap]); // 转换 Map 为数组再转换为 JSON
            let auditRs = $("input[name='status']:checked").val();
            let auditRsText = $("#statusLabel"+auditRs).text();
            if ($.validate.form()) {
                layer.confirm("是否【"+auditRsText+"】该登记审核单？", {
                    title: '系统提示',
                    icon: 3,
                    btn: ['确定', '返回'], //可以无限个按钮
                    yes: function(index, layero){
                        // 拿到全部表格数据
                        var datas = $('#bootstrap-table').bootstrapTable('getData');
                        // 执行审核流程
                        $.operate.save(prefix + "/auditbyflowOps", $('#form-djaudit-edit').serialize() + "&handleDetails=" + handleDetails + "&escrowDetails=" + escrowDetails + "&withdrawDetails=" + withdrawDetails + "&detailsOpsIdsMap=" + encodeURIComponent(jsonData));
                    },cancel: function(index, layero){
                        layer.close(index);
                    }
                });
            }
        }

    }