DataTable绑定onChange事件更新数据时下拉框、textarea值丢失问题咨询

你遇到的下拉框、textarea值无法留存的问题核心是以下两点：

1. 当你在onChange事件中调用cell.data($(this).val())更新DataTable内部数据时，DataTable会自动触发对应单元格的重绘，重新执行你定义的render函数。但你原来的render函数在生成表单元素时，没有用当前单元格存储的最新值回填，导致每次重绘都回到初始状态。
2. 你写的render函数本身存在几个语法、逻辑错误，也会导致值无法正确渲染：

• 生成select的代码中，No对应的option标签没有闭合，少了>
• 你尝试用$("#eligible_1st_"+a).val("")给select赋值时，该dom元素还没被插入到页面中，这行代码完全不生效，且你主动赋值为空的逻辑本身也不符合回填需求
• textarea不存在value属性，它的内容需要写在标签闭合区间内，你把值写在value属性里自然无法正常读取、展示

只需要修改你的columnDefs配置中的render逻辑即可，onChange函数无需改动：

"columnDefs":[
    {
        "targets":[12], 
        render : function(data, type, row, meta) {
            // 用meta.row取行索引更可靠，避免result有重复行时indexOf匹配错误
            const rowIdx = meta.row;
            // 生成select的时候直接把当前data设为选中值
            const $select = $("<select class='browser-default' id='eligible_1st_"+rowIdx+"'><option value='Yes'>Yes</option><option value='Y'>Y</option><option value='No'>No</option></select>");        
            $select.val(data || "");        
            return $select.prop("outerHTML")        
        }
    },                      
    {
        "targets":[13], 
        render : function(ditem){
            return `<input type='date' value='${ditem || ""}'/>`;
        }
    },
    {
        "targets":[14], 
        render : function(ditem){
            // textarea的值要写在标签中间
            return `<textarea rows='4' cols='80'>${ditem || ""}</textarea>`;
        }
    }
]

修改后每次单元格重绘时，都会用DataTable里存的最新值回填表单元素，选中的下拉项、输入的评论内容就不会再被重置了。

内容的提问来源于stack exchange，提问作者PriyankaJ