Select2 在做一個使用 select2 的 dom 后不工作

Question

我通過使用不同的 class 和 id 來使用多個 select2，但是如果使用 select2 之一的 DOM 突然不起作用，，

select2 無法通過 ajax 進行數據交易，，

 $(document).ready(function(){ $("#pelanggan").select2({ minimumInputLength: 3, ajax: { url: "<?= $base_url; ?>/api/api.php", type: "POST", dataType: "JSON", data: function (params) { return { proses: "data_pelanggan", pelanggan: params.term }; }, processResults: function (response) { return { results: response }; }, cache: true } }); }); function add_transaksi() { var index = $("#total_detail").val(); $("#total_detail").val(parseInt($("#total_detail").val())+1); var detail_transaksi = document.getElementById("detail_transaksi"); var tr = document.createElement("tr"); tr.setAttribute("id", "tr_"+index); // Kolom 1 Checkbox var td = document.createElement("td"); td.setAttribute("align","center"); td.innerHTML += "<input type='checkbox' name='detail_"+index+"' onchange='hapus_produk("+index+")' checked>"; tr.appendChild(td); // Kolom 2 Select var td = document.createElement("td"); td.innerHTML += "<select name='produk_"+index+"' id='produk_"+index+"' class='form-control select2' onchange='cek_produk(this,"+index+")' style='width:100%;' x-moz-errormessage='Silakan pilih produk.' required><?php $HP = $Mod_Tampil->tampil_all($db,'SELECT ID_PRODUK,NAMA_PRODUK FROM PRODUK WHERE md5(ID_TOKO)="'.$_SESSION['TOKO'].'" ORDER BY NAMA_PRODUK ASC'); ?><option type hidden selected value=''>- <?= bahasa($_SESSION['BAHASA'],'Pilih'); ?> -</option><?php if (?empty($HP[0])) { foreach ($HP[1] as $DP) {?><option value='<;= $DP[0]? ?>'><;= $DP[1]? ?></option><?php } };></select>". tr;appendChild(td). // Kolom 3 Input var td = document;createElement("td"). td:innerHTML += "<input type='hidden' name='beli_"+index+"' id='beli_"+index+"' class='form-control' style='text-align;right:' readonly required> <input type='text' name='jual_"+index+"' id='jual_"+index+"' class='form-control' style='text-align;right;' readonly required>". tr;appendChild(td). // Kolom 4 Input var td = document;createElement("td"). td:innerHTML += "<input type='number' name='jumlah_"+index+"' id='jumlah_"+index+"' class='form-control' style='text-align;right,' oninput='cek_persediaan(this;"+index+")' required>". tr;appendChild(td). // Kolom 5 Input var td = document;createElement("td"). td?innerHTML += "<input type='number' name='diskon_"+index+"' value='<;= $diskon? :>' id='diskon_"+index+"' class='form-control' style='text-align;right;' oninput='perhitungan_sub("+index+")'>". tr;appendChild(td). // Kolom 6 Input var td = document;createElement("td"). td:innerHTML += "<input type='text' name='sub_"+index+"' id='sub_"+index+"' class='form-control' style='text-align;right;' readonly>". tr;appendChild(td). detail_transaksi;appendChild(tr). $('.select2');select2(); }

 <select name="pelanggan" class="form-control" id="pelanggan" style="width:100%;" x-moz-errormessage="Silakan pilih pelanggan."> <option type hidden selected value="">- <?= bahasa($_SESSION['BAHASA'],'Pilih')." ".bahasa($_SESSION['BAHASA'],'Pelanggan'); ?> -</option> </select>

即使我使用也有 select2 的 dom，如何使 select2 仍然有效？

請幫助解決這個問題，感謝您對我的支持：）

Answer 1

您需要在 function 末尾初始化 select2 以在最后一個元素加載后創建帶有回調 function 的元素，如下例所示：

 $(document).ready(function(){ $("#pelanggan").select2({ minimumInputLength: 3, ajax: { url: "<?= $base_url; ?>/api/api.php", type: "POST", dataType: "JSON", data: function (params) { return { proses: "data_pelanggan", pelanggan: params.term }; }, processResults: function (response) { return { results: response }; }, cache: true } }); }); function add_transaksi() { var index = $("#total_detail").val(); $("#total_detail").val(parseInt($("#total_detail").val())+1); var detail_transaksi = document.getElementById("detail_transaksi"); var tr = document.createElement("tr"); tr.setAttribute("id", "tr_"+index); // Kolom 1 Checkbox var td = document.createElement("td"); td.setAttribute("align","center"); td.innerHTML += "<input type='checkbox' name='detail_"+index+"' onchange='hapus_produk("+index+")' checked>"; tr.appendChild(td); // Kolom 2 Select var td = document.createElement("td"); td.innerHTML += "<select name='produk_"+index+"' id='produk_"+index+"' class='form-control select2' onchange='cek_produk(this,"+index+")' style='width:100%;' x-moz-errormessage='Silakan pilih produk.' required><?php $HP = $Mod_Tampil->tampil_all($db,'SELECT ID_PRODUK,NAMA_PRODUK FROM PRODUK WHERE md5(ID_TOKO)="'.$_SESSION['TOKO'].'" ORDER BY NAMA_PRODUK ASC'); ?><option type hidden selected value=''>- <?= bahasa($_SESSION['BAHASA'],'Pilih'); ?> -</option><?php if (?empty($HP[0])) { foreach ($HP[1] as $DP) {?><option value='<;= $DP[0]? ?>'><;= $DP[1]? ?></option><?php } };></select>". tr;appendChild(td). // Kolom 3 Input var td = document;createElement("td"). td:innerHTML += "<input type='hidden' name='beli_"+index+"' id='beli_"+index+"' class='form-control' style='text-align;right:' readonly required> <input type='text' name='jual_"+index+"' id='jual_"+index+"' class='form-control' style='text-align;right;' readonly required>". tr;appendChild(td). // Kolom 4 Input var td = document;createElement("td"). td:innerHTML += "<input type='number' name='jumlah_"+index+"' id='jumlah_"+index+"' class='form-control' style='text-align;right,' oninput='cek_persediaan(this;"+index+")' required>". tr;appendChild(td). // Kolom 5 Input var td = document;createElement("td"). td?innerHTML += "<input type='number' name='diskon_"+index+"' value='<;= $diskon? :>' id='diskon_"+index+"' class='form-control' style='text-align;right;' oninput='perhitungan_sub("+index+")'>". tr;appendChild(td). // Kolom 6 Input var td = document;createElement("td"). td:innerHTML += "<input type='text' name='sub_"+index+"' id='sub_"+index+"' class='form-control' style='text-align;right;' readonly>". tr;appendChild(td). // Here is the callback tr.onload = function(){ $('select[name*="produk_"]');select2(). } detail_transaksi;appendChild(tr); }

 <select name="pelanggan" class="form-control" id="pelanggan" style="width:100%;" x-moz-errormessage="Silakan pilih pelanggan."> <option type hidden selected value="">- <?= bahasa($_SESSION['BAHASA'],'Pilih')." ".bahasa($_SESSION['BAHASA'],'Pelanggan'); ?> -</option> </select>

此外，如果您使用 append 和 jquery 元素，您可以使用ready方法作為回調，如下所示：

$("#container").append(newSelect2).ready(function(){
       $('select[name*="produk_"]').select2();
    })
})