使用 SelectPicker 動態添加行

Question

早晨，

我在第一列有一個帶有 selectpicker 的表。 我想動態添加行。 實際上，在添加第一行之后就可以了，但我不能 select 用於第二列。 謝謝你的幫助。

我的桌子：

<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 添加行：

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：

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); 
          ...
        }
    });
}

Answer 1

您在代碼中使用 selectpicker，因此此插件創建自己的動態 html 並為其分配ids,data-attribute ，因此當您克隆tr 時，它們也是副本，這就是為什么您在新添加的下拉列表中看不到選項，也不是它們能夠選擇。

相反，實現這項工作的一種方法是將克隆的 tr 存儲在selectpicker尚未初始化的某個變量中。 然后，每當add_row() function 時，只需在您的tbody中使用克隆的 tr 到 append ，然后使用$("#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>

Answer 2

也許是因為你的<Select元素有一個 ID，你需要讓它唯一？ 嘗試將此添加到您的cleanUpInputs function

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){