单击按钮时动态添加/创建选择器答案

【问题标题】：Dynamic Adding/Creating Selectpicker on button click单击按钮时动态添加/创建选择器
【发布时间】：2018-05-02 03:33:36
【问题描述】：

我想通过单击添加按钮在我的 HTML 表中动态添加一行。该行包含一个使用 selectpicker 类 的选择元素。当我在脚本中删除 selectpicker 类以添加新行时，选择元素完美地出现在新创建的行中。但是当我在脚本中使用 selectpicker 时，元素不会呈现。

这是我的桌子：

$(".addRow").click(function() {
      $(this).closest('table').find('tr:last').prev().after('<tr><td> <
        select name = "myselect[]"
        id = "myselect"
        class = "selectpicker" >
        <
        option > --Select Resp.Center-- < /option> <
        option value = "1" > My Option 1 < /option> <
        option value = "2" > My Option 2 < /option> <
        option value = "3" > My Option 3 < /option> <
        /select> <
        /td> <
        td >
        <
        a href = "#"
        class = "removeRow" > < i class = "fa fa-minus-square fa-fw" > < /i></a >
        <
        /td> <
        /tr>');
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr class="myRow">
    <td>
      <select name="myselect[]" id="myselect" class="selectpicker" data-live-search="true">
        <option>--Select Option--</option>
        <option value="1">My Option 1</option>
        <option value="2">My Option 2</option>
        <option value="3">My Option 3</option>
      </select>
    </td>
    <td><a href="#" class="addRow"><i class="fa fa-plus-square"></i></a></td>
  </tr>
</table>

【问题讨论】：

已经解决了。刚刚使 bootstrap-select.js 最后加载。

标签： javascript jquery html bootstrap-selectpicker

【解决方案1】：

字符串中不能有换行符。只需删除换行符，它就可以很好地呈现。

$(".addRow").click(function (elem) {
    $(this).closest('table').find("tr:last").after('<tr><td><select name="myselect[]" id="myselect" class="selectpicker"><option>--Select Resp. Center--</option><option value="1">My Option 1</option><option value="2">My Option 2</option><option value="3">My Option 3</option></select></td><td><a href="#" class="removeRow"><i class="fa fa-minus-square fa-fw"></i></a></td></tr>');
});

【讨论】：

谢谢。但我只是在上面的代码中使用了换行符以便于阅读。我的代码中没有换行符，它仍然没有呈现。

【解决方案2】：

您需要更改选择器，还需要连接选择选项。

$(".addRow").click(function() {
  $(this).closest('table').find('tr:last').after('<tr><td> ' +
    '<select name="myselect[]" id="myselect" class="selectpicker">' +
    '   <option>--Select Resp. Center--</option>' +
    '  <option value="1">My Option 1</option>' +
    ' <option value="2">My Option 2</option>' +
    '<option value="3">My Option 3</option>' +
    '</select>' +
    '</td>' +
    '<td>' +
    '   <a href="#" class="removeRow"><i class="fa fa-minus-square fa-fw"></i></a>' +
    '</td>' +
    ' </tr>');
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr class="myRow">
    <td>
      <select name="myselect[]" id="myselect" class="selectpicker" data-live-search="true">
        <option>--Select Option--</option>
        <option value="1">My Option 1</option>
        <option value="2">My Option 2</option>
        <option value="3">My Option 3</option>
      </select>
    </td>
    <td><a href="#" class="addRow"><i class="fa fa-plus-square"></i></a></td>
  </tr>
</table>

【讨论】：

谢谢。我完全知道正确的连接。我只是在上面使用了换行符以便于阅读。我的代码中没有换行符，但 select 元素仍然没有呈现。
你试过上面的代码吗？如果有，错误说明了什么？
没有错误。无论如何，我使用了选择器，因为我想在表的最后一行之前添加行。删除选择器中的 prev() 会在末尾添加新行表，仍然选择不呈现..

【解决方案3】：

通过将 bootstrap-select.js（用于 selectpicker）放置在我的 php 文件中的所有 js 文件之后以使其最后加载来解决此问题。

【讨论】：