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

Posted 2023-05-09

【中文标题】jQuery生成下拉列表动态默认选择

【英文标题】：JQuery generate drop-down list dynamic default selection

【发布时间】：2021-12-06 16:42:16

【问题描述】：

我正在构建一个 DataTable，一切都很好。

其中一列，我需要渲染一个选择/下拉列表并设置默认选择值。

我设法渲染

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");
                              

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

【问题讨论】：

select.val(data.selectedvalue) 设置选定的选项。你不需要.attr()。

【参考方案1】：

您需要设置 appropriaet 选项的属性，而不是下拉菜单，这样它就会被包含在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");
    

【讨论】：

谢谢，有道理！它有效，只需将格式更改为 find('option[value=' + data.selectedvalue+']') 任何想法为什么您的格式不起作用？我会得到 Uncaught Error: Syntax error, unrecognized expression: option[value=$data.selectedvalue]

您确定您正确复制了反引号吗？那是一个 ES6 template literal

你说得对，我以为我必须使用这种格式的报价 ' 改为你的 ` 并且一切正常！不知道 ` 在 jquery 中使用。谢谢！

它只是纯 javascript，与 jQuery 无关。