Question

我在表格中使用了可搜索的选项以下项目名称。在单击上面的添加项目按钮时，将按默认值插入新行。但是，第一行中的select只会在select行选项的第二行下拉菜单中打开时发生。

我认为问题在于我无法为选择分配不同的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

所以我在这里使用克隆方法来完成这项任务。以下是我已更改的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);

}

如何在表格行中插入可搜索的选择框？

2 个答案: