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

Question

我通过使用不同的类和 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>

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

请帮助解决这个问题，感谢您对我的支持:)

Answer 1

您需要在函数末尾初始化 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();
    })
})