JQuery 生成下拉列表动态默认选择

Question

我正在构建一个 DataTable，一切都呈现得非常好。

其中一列，我需要呈现一个 select/drop-down 列表并设置默认选择值。

我成功渲染了

render: function (data) {  
  //e.g. data.selectedvalue = 1 or 2 or 3
        
 var select = $("<select class='target' id='empstatus'><option value ='1'>Open</option><option value ='2'>Close</option><option value ='3'>N/A</option></select>");

 //tried to set value - but it is not setting default selection, always shows the first selection after it renders
 select.val(data.selectedvalue).attr('selected', 'selected');


 return select.prop("outerHTML");
}

此列表呈现，我的问题是如何设置动态选择值？

Answer 1

You need to set the attribute of the appropriaet option, not the dropdown, so that it will be included in the outerHTML.

render: function (data) {  
  //e.g. data.selectedvalue = 1 or 2 or 3
        
  var select = $("<select class='target' id='empstatus'><option value ='1'>Open</option><option value ='2'>Close</option><option value ='3'>N/A</option></select>");
  select.find(`option[value=${data.selectedvalue}]`).attr('selected', 'selected');

 return select.prop("outerHTML");
}

JQuery 生成下拉列表动态默认选择

JQuery generate drop-down list dynamic default selection

javascript

jquery

datatables