在执行使用 select2 的 dom 后,Select2 不工作
Select2 not working after doing a dom that uses select2
我通过使用不同的 class 和 id 使用多个 select2,但是如果使用 DOM 其中一个 select2 突然不起作用,
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 仍然工作?
请帮忙解决这个问题,谢谢你对我的支持:)
您需要在函数末尾初始化 select2,以便在加载最后一个元素后使用回调函数创建元素,如下例所示:
$(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>
此外,如果您附加 jquery 元素,您可以使用 ready
方法作为回调,如下所示:
$("#container").append(newSelect2).ready(function(){
$('select[name*="produk_"]').select2();
})
})
我通过使用不同的 class 和 id 使用多个 select2,但是如果使用 DOM 其中一个 select2 突然不起作用,
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 仍然工作?
请帮忙解决这个问题,谢谢你对我的支持:)
您需要在函数末尾初始化 select2,以便在加载最后一个元素后使用回调函数创建元素,如下例所示:
$(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>
此外,如果您附加 jquery 元素,您可以使用 ready
方法作为回调,如下所示:
$("#container").append(newSelect2).ready(function(){
$('select[name*="produk_"]').select2();
})
})