添加新输入时 addform select2 不起作用

Question

$(document).ready(function(){ 
            $("#btn-tambah-form").click(function(){ 
                var jumlah = parseInt($("#jumlah-form").val()); 
                var nextform = jumlah + 1;
                // Kita akan menambahkan form dengan menggunakan append
                // pada sebuah tag div yg kita beri id insert-form
                $("#insert-form").append(
                    "<div class='row mb-10 p-10'>" +
                    "   <div class='input-group  col-md-3'>" +
                    "       <select class='form-control select2' name='akun_biaya[]' id='akun_biaya"+nextform+"' style='width: 100%;' required>" +
                    "       <option></option>" +
                    "       <?php $query2 = mysqli_query($conn,'select a.*, b.* from akun a left join akun_kategori b on a.akun_jenis = b.kategori_nomor'); ?>" +
                    "           <?php while ($data2 = mysqli_fetch_array($query2)){ ?>" +
                    "           <?php echo '<option value=\''.$data2['akun_nomor'].'\'>'.$data2['akun_nomor'].' | '.$data2['akun_nama'].' ('.$data2['kategori_nama'].')</option>';  } ?>" +
                    "       </select>" +
                    "   </div>" +
                    "   <div class='input-group  col-md-3'>" +
                    "       <input class='form-control' type='text' name='uraian[]' id='uraian"+nextform+"'>" +
                    "   </div>" +
                    "   <div class='input-group col-md-2'>" +
                    "       <select class='form-control' name='pajak[]' id='pajak"+nextform+"' style='width: 100%;' onchange='sum();'>" +
                    "           <?php echo Pajak();?>" +
                    "       </select>" +
                    "   </div>" +
                    "   <div class='input-group col-md-4'>" +
                    "       <span class='input-group-addon'>Rp.</span><input class='form-control' type='number' name='subtotal[]' id='subtotal"+nextform+"' value='0' onkeyup='sum();'>" +
                    "   </div>" +
                    "</div>");
    
                    
                $("#jumlah-form").val(nextform); // Ubah value textbox jumlah-form dengan variabel nextform
            });
            
            // Buat fungsi untuk mereset form ke semula
            $("#btn-reset-form").click(function(){
                $("#insert-form").html(""); // Kita kosongkan isi dari div insert-form
                $("#jumlah-form").val("1"); // Ubah kembali value jumlah form menjadi 1
            });
            
        });

我正在办公室创建一些应用程序，但我在 select2 的添加表单中遇到问题。当我添加新的输入表单时它不起作用。有人可以帮我解决这个问题吗？

Answer 1

创建新元素后，需要将select2初始化为创建的内容，类似这样：

$(document).ready(function(){ 
            $("#btn-tambah-form").click(function(){ 
                var jumlah = parseInt($("#jumlah-form").val()); 
                var nextform = jumlah + 1;
                // Kita akan menambahkan form dengan menggunakan append
                // pada sebuah tag div yg kita beri id insert-form
                $("#insert-form").append(
                    "<div class='row mb-10 p-10'>" +
                    "   <div class='input-group  col-md-3'>" +
                    "       <select class='form-control select2' name='akun_biaya[]' id='akun_biaya"+nextform+"' style='width: 100%;' required>" +
                    "       <option></option>" +
                    "       <?php $query2 = mysqli_query($conn,'select a.*, b.* from akun a left join akun_kategori b on a.akun_jenis = b.kategori_nomor'); ?>" +
                    "           <?php while ($data2 = mysqli_fetch_array($query2)){ ?>" +
                    "           <?php echo '<option value=\''.$data2['akun_nomor'].'\'>'.$data2['akun_nomor'].' | '.$data2['akun_nama'].' ('.$data2['kategori_nama'].')</option>';  } ?>" +
                    "       </select>" +
                    "   </div>" +
                    "   <div class='input-group  col-md-3'>" +
                    "       <input class='form-control' type='text' name='uraian[]' id='uraian"+nextform+"'>" +
                    "   </div>" +
                    "   <div class='input-group col-md-2'>" +
                    "       <select class='form-control' name='pajak[]' id='pajak"+nextform+"' style='width: 100%;' onchange='sum();'>" +
                    "           <?php echo Pajak();?>" +
                    "       </select>" +
                    "   </div>" +
                    "   <div class='input-group col-md-4'>" +
                    "       <span class='input-group-addon'>Rp.</span><input class='form-control' type='number' name='subtotal[]' id='subtotal"+nextform+"' value='0' onkeyup='sum();'>" +
                    "   </div>" +
                    "</div>");
    
                    
                $("#jumlah-form").val(nextform); // Ubah value textbox jumlah-form dengan variabel nextform

                $(".select2").select2(); // <-- initializing select2
            });
            
            // Buat fungsi untuk mereset form ke semula
            $("#btn-reset-form").click(function(){
                $("#insert-form").html(""); // Kita kosongkan isi dari div insert-form
                $("#jumlah-form").val("1"); // Ubah kembali value jumlah form menjadi 1
            });
            
        });

添加新输入时 addform select2 不起作用

addform select2 not working when add new input

php

jquery

modal-dialog

jquery-select2