jQuery生成DataTable下拉列表时动态设置默认选中值的问题问询

1. 原代码中select.val(data.selectedvalue).attr('selected', 'selected')存在属性绑定错误：selected是<option>元素的专属属性，给<select>元素添加该属性不会生效。
2. jQuery的val()方法修改的是DOM元素的内存属性（property），不会同步更新HTML标签上的属性（attribute），最终返回outerHTML序列化HTML字符串时，内存中的选中状态不会被带入输出内容，所以渲染后始终默认选中第一个选项。

方案1：构造option时主动匹配选中值（推荐） #

构造option节点时判断当前值是否和目标选中值匹配，直接给匹配的option添加selected属性，逻辑清晰兼容性好：

render: function (data) {  
  // 统一转为字符串类型，避免数字/字符串类型不匹配导致选中失败
  const targetValue = String(data.selectedvalue);
  const select = $("<select class='target' id='empstatus'></select>");
  const optionList = [
    {value: '1', text: 'Open'},
    {value: '2', text: 'Close'},
    {value: '3', text: 'N/A'}
  ];

  optionList.forEach(item => {
    const $option = $("<option></option>").val(item.value).text(item.text);
    if (item.value === targetValue) {
      $option.attr('selected', 'selected');
    }
    select.append($option);
  });

  return select.prop("outerHTML");
}

方案2：现有结构下补充选中属性 #

如果不想修改原有option的拼接逻辑，也可以在设置完val后主动给对应option添加selected属性：

render: function (data) {  
  const targetValue = String(data.selectedvalue);
  var select = $("<select class='target' id='empstatus'><option value ='1'>Open</option><option value ='2'>Close</option><option value ='3'>N/A</option></select>");
  // 设置值后找到对应option补充selected属性
  select.val(targetValue).find(`option[value="${targetValue}"]`).attr('selected', 'selected');
  return select.prop("outerHTML");
}

你当前代码给select设置了固定idempstatus，DataTable是多行渲染的场景下会出现id重复问题，可能导致后续DOM操作异常，建议去掉固定id或者改为动态生成的唯一值。

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