javascript - 使用 jquery 动态添加时 select2 不起作用

Question

我有一个元素是动态的表单。我们可以根据需要添加一行。这是一个图片链接 dynamic form

正如我们所看到的，我们只需按“tambah kolom”按钮即可添加一行，然后该行将附加到表单中。我使用jquery来添加动态。这是我的表单代码

HTML

<tr>
        <td>
            <input type="number" class="form-control" value="{{ old('itemujiriksa[0][jumlah_barang]') }}" name="itemujiriksa[0][jumlah_barang]">
        </td>                
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][nama_barang]') }}" name="itemujiriksa[0][nama_barang]">
        </td>
        <td class="form_tabung">
            <select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">
            </select>
        </td>
        <td class="form_alat" style="display:none">
            <select name="itemujiriksa[0][alat_id]" class="form-control alat" style="width: 100%">
            </select>
        </td>
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][keluhan]') }}" name="itemujiriksa[0][keluhan]">
        </td>
        <td>
            <input type="file" class="form-control" value="{{ old('itemujiriksa[0][fototabung][]') }}" name="itemujiriksa[0][fototabung][]" multiple />
        </td>
    </tr>

这是我的 jquery 代码

jquery

<script>
$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#input_fields_wrap"); //Fields wrapper
var add_button      = $("#add_field_button"); //Add button ID

var x = {{$a}}; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        $(wrapper).append('<tr>\
        <td>\
            <input type="number" class="form-control" value="{{ old('jumlah_barang[]') }}" name="itemujiriksa[' + x +'][jumlah_barang]">\
        </td>\
        <td>\
            <input type="text" class="form-control" value="{{ old('nama_barang[]') }}" name="itemujiriksa[' + x +'][nama_barang]">\
        </td>\
        <td class="form_tabung">\
            <select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">\
            </select>\
        </td>\
        <td class="form_alat" style="display:none">\
            <select name="itemujiriksa[0][alat_id]" class="js-selectize form-control" placeholder="Pilih No Alat">\
                <option disabled selected value></option>\
                @foreach($alats as $at)\
                    <option value="{{ $at->id }}">{{ $at->no_alat }}</option>\
                @endforeach\
            </select>\
        </td>\
        <td>\
            <input type="text" class="form-control" value="{{ old('keluhan[]') }}" name="itemujiriksa[' + x +'][keluhan]">\
        </td>\
        <td>\
            <input type="file" class="form-control" value="{{ old("itemujiriksa['+ x +'][fototabung][]") }}" name="itemujiriksa[' + x +'][fototabung][]" multiple>\
        </td>\
        <td><a class="btn btn-danger remove_field">Hapus Kolom</a></td>\
    </tr>'); //add input box
        x++; //text box increment
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parents("tr").remove(); x--;
}) });

这是我的 select2 代码

选择2

$(document).ready(function() { var $select2Elm = $('.alat');
$select2Elm.select2({
        width: 'resolve',
        placeholder: "Pilih No Alat",
        ajax: {
            url: function(){
                var value = $('#customer').val();
                var url = "/admin/getDataAlat/ujiriksa/"+value;
                console.log(url);
                return url;
            },
            dataType: 'json',
            type: "GET",
            delay: 250,
            data: function (params) {
              return {
                q: params.term, // search term
                page: params.page
              };
            },
            processResults: function (data, page) {
              // parse the results into the format expected by Select2.
              // since we are using custom formatting functions we do not need to
              // alter the remote JSON data
              return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name,
                        id: item.id
                    }
                })
              };
            },
            cache: true
          },
}); });

我的问题是

我已经定义了类alat来启动no tabung选择框来填充select2中的数据。但添加新行后，类是相同的。新的选择框不会填充数据。主人我该怎么办？

Answer 1

附加 html 后，您需要初始化每个新的 select 元素。

$(add_button).click(function(e){

    //append new table rows here
    $(wrapper).append('...');

    //reinitialize the new select box
    $('.alat').select2({
     //configuration
    });

});