Невозможно добавить динамический выбор начальной загрузки в таблицу

Question

Я пытаюсь динамически добавить bootstrap-select в таблицу, определенную следующим образом:

<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="select0">
                                    <option>opt1</option>
                                     <option>opt2</option>
                                    </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2"><a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>

По сути, мой скрипт создает новую строку в этой таблице, когда пользователь нажимает кнопку.Проблема в том, что новый bootstrap-select, который вы можете загрузить здесь , не добавлен правильно, а факт невидим.Я не знаю, как это исправить, кто-то может мне помочь?

Это код js:

 $(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });



   $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
   });


    });

и это рабочая скрипка .

Answer 1

Я не уверен, что вы имели в виду под $(...).selectpicker(), не сработало, потому что я проверил это в вашей скрипке, и оно работало просто отлично.Я разветвлял его здесь https://jsfiddle.net/hpysz5xr/

Код указан ниже.

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    $('#select'+counter).selectpicker();
    counter++;
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="criteria0">
          <option>opt1</option>
          <option>opt2</option>
        </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2">
        <a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>