Question

我想在点击添加按钮时在HTML表格中动态添加一行。该行包含一个使用 selectpicker类的select元素。当我在脚本中删除selectpicker类以添加新行时，select元素完美地出现在新创建的行中。但是当我在脚本中使用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>

Answer 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>');
});

Answer 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>

Answer 3

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

单击按钮时动态添加/创建Selectpicker

3 个答案: