Dynamically inserting a bootstrap-select cell into a table row not working

Question

I have dynamically created a table row and am inserting each cell into a the row and then into the table. All the previous cells are working (as they are simple checkbox inputs or plain text) however this row is different.

I am trying to insert a bootstrap-select dropdown into a table cell dynamically and am not having any luck. It is not throwing any errors, however it is not displaying a dropdown.

My attempt based off 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);

Any help is appreciated.

Thanks

Answer 1

You can do it like this:

Table

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

Script

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

Online result jsfiddle.