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

Posted 2023-03-14

【中文标题】使用jquery动态添加时select2不起作用

【英文标题】：select2 doesn't work when add from dynamically with jquery

【发布时间】：2017-11-28 06:18:28

【问题描述】：

我有一个元素是动态的形式。我们可以根据需要添加一行。这是一个图片链接 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 代码

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 填充数据。但是在添加一个新行之后，类是相同的。新的选择框不填充数据。我该怎么办？

【参考方案1】：

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

$(add_button).click(function(e)

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

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

);

【参考方案2】：

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

你可以看到下面的例子

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

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