使用 SelectPicker 动态添加行

问题描述

早上好，

我在第一列中有一个带有 selectpicker 的表。我想动态添加行。实际上在添加第一列之后就可以了，但我无法选择第二列。感谢您的帮助。

我的桌子：

<tbody>
    <tr>
        <td>
            <Select class="selectpicker" name="item_desc[]" id="item_desc" type="integer" onchange="select_fields(this)">
                <option> </option>
                @foreach ($articles as $article)
                    <option>{{$article->id}}</option>
                @endforeach
            </Select>
        </td>
        <td class="writefields" name="item_fields[]"></td>
        <td><i class="btn far fa-trash-alt" onclick="remove_row(this)"></i></td>
    </tr>
</tbody>

我添加行的函数：

function add_row(){
     var root = document.getElementById('add_table').getElementsByTagName('tbody')[0];
     var rows = root.getElementsByTagName('tr');
     var clone = cloneEl(rows[rows.length -1]);
     cleanUpInputs(clone);
     root.appendChild(clone);
 }

 function cloneEl(el){
     var clo = el.cloneNode(true);
     return clo;
 }

 function cleanUpInputs(obj){
     for (var i = 0; n = obj.childNodes[i]; ++i){
         if(n.childNodes && n.tagName != 'INPUT'){
             cleanUpInputs(n);
         }else if (n.tagName == 'INPUT' && n.type == 'text') {
             n.value = '';
         }
     }
 }

我的 select_fields 函数：

function select_familyfields(e)
{
    ...
    var selectionfamille = e.value;

  $.ajax({
            type: "POST",url: "/achats/selection",data: {_token: CSRF_TOKEN,code_item : selection },dataType: "JSON",success: function (data) {       $(e).parents('tr').find('.item_fields[]').text(data.natureachat.LibNatureAchat); 
          ...
        }
    });
}

解决方法

也许是因为您的 <Select 元素有一个 ID，您需要使其唯一？试试这个添加到您的 cleanUpInputs 函数

function cleanUpInputs(obj){
     let cloneCounter = document.getElementById('add_table').getElementsByTagName('tbody').length + 1
     obj.getElementsByClassName('.selectpicker')[0].id = "item_desc" + cloneCounter;
     for (var i = 0; n = obj.childNodes[i]; ++i){

您在代码中使用了 selectpicker，因此该插件会创建自己的动态 html 并将 ids,data-attribute 分配给它们，因此当您克隆 tr 时，它们也会被复制，这就是您不这样做的原因' t 在新添加的下拉列表中看到选项，也无法选择。

相反，实现这一目标的一种方法是将 cloned tr 存储在 selectpicker 尚未初始化的某个变量中。然后，无论何时调用 add_row() 函数，只需使用克隆的 tr 附加到您的 tbody 中，然后使用 $("#add_table tbody tr:last select").selectpicker() 初始化您的选择器。

演示代码：

var cloned = $("#add_table tbody tr:first").clone() //keep clone for later use..
$("select[name*=item_desc]").selectpicker() //intialize your slectpicker
function add_row() {
  $(cloned).find("input").val("") //empty any input..
  $(cloned).find(".writefields").text("") //clear td 
  $("<tr>" + $(cloned).html() + "</tr>").appendTo($("#add_table tbody")) //append to your tbody..
  $("#add_table tbody tr:last select").selectpicker() //intialize newly added selct...
}

function select_fields(e) {
  var selectionfamille = e.value;
  console.log(selectionfamille)

  /* $.ajax({
     type: "POST",url: "/achats/selection",data: {
       _token: CSRF_TOKEN,code_item: selection
     },dataType: "JSON",success: function(data) {*/
  //just for demo...
  $(e).parents('tr').find('[name="item_fields[]"]').text("abcxyz") //data.natureachat.LibNatureAchat;

  /*}
  });*/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<table id="add_table">
  <tbody>
    <tr>
      <td>
        <!--remove selectpicker class and id..-->
        <select name="item_desc[]" onchange="select_fields(this)">
          <option> </option>

          <option>1</option>
          <option>2</option>
        </select>
      </td>
      <td class="writefields" name="item_fields[]">Smethings...</td>
      <td><i class="btn far fa-trash-alt" onclick="remove_row(this)">Delete</i></td>
    </tr>
  </tbody>
</table>
<button onclick="add_row()">Add</button>

bootstrap-select javascript jquery laravel laravel