如何在表格行中插入可搜索的選擇框？

Question

在表格中，我在項目名稱下方使用了可搜索的選擇。 單擊上方的添加項目按鈕時，默認值會插入新行。 但是發生的情況是在第一行中選擇僅有效，而在第二行中選擇選項的下拉菜單未打開。

我認為問題在於我無法為選擇分配不同的 ID。

<!-- searchable select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- searchable select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

添加項目的功能

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

          var newcell = row.insertCell(i);

          newcell.innerHTML = table.rows[0].cells[i].innerHTML;

          switch(newcell.childNodes[0].type) {
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                newcell.childNodes[0].id = "aa"+rowCount;
                break;
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;

          }

        }
      }

選擇 HTML

[![<td>

 <select type="select-one" class="selectpicker" data-width="fit" data-live-search="true" data-container="body" data-show-subtext="true" name="item_details[]">
    <option value="1"> Computer </option>
    <option value="2"> Laptop </option>
    <option value="3"> Mouse </option>
    <option value="4"> Keyboard </option>
    <option value="5"> Writer </option>
  </select>

</td>][2]][2]

Answer 1

將選擇的 HTML 添加到 DOM 后，您需要刷新選擇選擇器

更多在這里http://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

$(".selectpicker").selectpicker('refresh');

使用時可能需要更改選擇器。

Answer 2

所以在這里我使用了 clone 方法來完成這個任務。 下面是我更改的addRow()函數。

addRow() 函數與 jquery 的 clone 方法。

function addRow() {

    var row = $('.new_item_row').last();

    var item_row_clone = $('.new_item_row').last().clone();
    item_row_clone.find('input[type=text]').val('');
    item_row_clone.find('input[type=checkbox]').prop('checked', false);
    item_row_clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
    item_row_clone.find('.selectpicker').selectpicker();
    row.after(item_row_clone);

}