将引导选择单元格动态插入表格行不起作用答案

【问题标题】：Dynamically inserting a bootstrap-select cell into a table row not working将引导选择单元格动态插入表格行不起作用
【发布时间】：2018-02-04 15:15:15
【问题描述】：

我已经动态创建了一个表格行，并将每个单元格插入到该行中，然后插入到表格中。之前的所有单元格都可以正常工作（因为它们是简单的复选框输入或纯文本），但是这一行不同。

我正在尝试将bootstrap-select 下拉列表动态插入到表格单元格中，但没有任何运气。它没有抛出任何错误，但没有显示下拉菜单。

我的尝试基于this quick search:

var cell = row.insertCell(5);
var selectCell = $('<select/>', {
    'class': "selectpicker"
});
selectCell.append("<option>Value 1</option>");
selectCell.append("<option>Value 2</option>");
selectCell.append("<option>Value 3</option>");

selectCell.appendTo(cell);

感谢任何帮助。

谢谢

【问题讨论】：

你插入了一个普通的<select>。如果你想要一个 bootstrap-select，在你添加到 DOM 后不需要附加插件
这肯定是插入select 类selectpicker 意味着引导选择应该是活动的？无论哪种方式，这不是意味着在表格行中显示正常的select 而不是什么都没有吗？
没有。添加元素后，您需要附加插件。您添加<select> 元素的代码工作正常（参考this fiddle）
我该怎么做呢？考虑到我的表格行在单元格中没有显示任何内容，这很奇怪......有什么想法吗？
不确定为什么您的代码不起作用（显然与您未向我们展示的代码有关） - 但要附加插件，您需要在将其添加到 DOM 后 selectCell.selectpicker({ ... }); 跨度>

标签： javascript jquery html asp.net-mvc bootstrap-select

【解决方案1】：

你可以这样做：

表格

<table>
  <tr id="row"></tr>
</table>

脚本

var row = document.getElementById('row');
var cell = row.insertCell(0);
/*var selectCell = $('<select/>', {
    'class': "selectpicker"
});*/

var selectCell = $('<select>');
$(selectCell).addClass('selectpicker');
selectCell.append("<option>Value 1</option>");
selectCell.append("<option>Value 2</option>");
selectCell.append("<option>Value 3</option>");

selectCell.appendTo(cell);

在线结果jsfiddle.

【讨论】：