Question

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

我们可以看到，我们可以添加一行，只需按下＆＃34; tambah kolom＆＃34;按钮然后该行将附加到表单。我用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代码

SELECT2

$(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
    });

});

Answer 2

您可以在添加代码后进行初始化。

你可以看下面的例子

$(document).on("click",".add-new-item",function(e){
var html = 'your html';
    $( '.element' ).append(html);
    initSelect2();});

function initSelect2() {
 $('.select2_single').select2();}

当使用jquery动态添加时，select2不起作用

2 个答案:

您可以在添加代码后进行初始化。