Select2 - Option çalışmıyor.

Merhabalar arkadaşlar.

Ben bir malzeme talep sistemi yapıyorum. Bu sistemde kişi girdiğinde bir kaç bilgi doldurup istediği malzemeleri seçip gönderiyor. Fakat şöyle bir sorunum var. Ekle adında bir butonum var ve bu butona basınca yeni malzeme seçebiliyor.
Normalde bir alt görselde olduğu gibi aramalı bir select alanım var.



Fakat Ekleye basınca alttaki görseldeki gibi normal select alanına dönüyor. Yani javascripti görmüyor gibi fakat içerisine eklemeye çalışınca da kabul etmiyor.


Kodlarım aşağıdaki gibidir.

HTML

<div class="form-group" id="malzeme">
<div class="form-group">
<label class="col-md-2 control-label">Malzeme</label>
<div class="col-md-5">
<select data-plugin-selectTwo class="form-control populate">
<option value="AK">Çay</option>
<option value="HI">Şeker</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="Kg / Adet">
</div>
<div class="col-sm-1">
<a href="#" type="button" id="addItem"  class="mb-xs mt-xs mr-xs btn btn-sm btn-primary"><i class="fa fa-plus-circle"></i>  EKLE</a>
</div>
</div>
</div>

Javascript

<script type="text/javascript">
$(window).load(function(){
$(function() {
var scntDiv = $('#malzeme');
var i = $('#malzeme').size() + 1;
$(document).on('click','#addItem', function() {
$('<span><div class="form-group"><label class="col-md-2 control-label">Malzeme</label><div class="col-md-5"><select data-plugin-selectTwo class="form-control populate"><option value="AK">Çay</option><option value="HI">Şeker</option></select></div><div class="col-sm-2"><input type="text" class="form-control" placeholder="Kg / Adet"></div><div class="col-sm-1"><a href="#" type="button" id="delItem"  class="mb-xs mt-xs mr-xs btn btn-sm btn-primary"><i class="fa fa-minus-circle"></i>  SİL</a></div></div></span>').appendTo(scntDiv);
i++;
return false;
});
$(document).on('click','#delItem', function() {
if( i > 2 ) {
$(this).parents('span').remove();
i--;
}
return false;
});
});
});
</script>

$('<span><div class="form-group"><label class="col-md-2 ... başlayan satırın altına select2 eklentisini yeniden çağır $("buraya element adı gelecek").select2(); gibi

<script src="assets/vendor/select2/select2.js"></script>

olarak içerisine ekliyorum fakat o zaman Ekle butonum çalışmıyor. Sanırım 2 tane aynı dosya olduğu için çakışıyor ve o yüzden çalışmıyor.

Aynen aynı dosyayı eklediğinizden dolayı çakışıyor. Söylediğim şekilde yapın çalışacaktır.

Hocam element adı dediğiniz nedir? select içerisindeki class değeriyse eğer yazdım fakat olmadı.

Select2 eklentisini nasıl çağrıyorsanız. Aynı şekilde satır eklerkende çağırmanız gerekiyor.

Örnek: $(".select2").select2() yada $(".listeleme").select2()

Aşağıdaki kodu deneyin.

<script type="text/javascript">
$(window).load(function(){
$(function() {
var scntDiv = $('#malzeme');
var i = $('#malzeme').size() + 1;
$(document).on('click','#addItem', function() {
$('<span><div class="form-group"><label class="col-md-2 control-label">Malzeme</label><div class="col-md-5"><select class="form-control populate select2"><option value="AK">Çay</option><option value="HI">Şeker</option></select></div><div class="col-sm-2"><input type="text" class="form-control" placeholder="Kg / Adet"></div><div class="col-sm-1"><a href="#" type="button" id="delItem"  class="mb-xs mt-xs mr-xs btn btn-sm btn-primary"><i class="fa fa-minus-circle"></i>  SİL</a></div></div></span>').appendTo(scntDiv);

$(".select2").select2();

i++;
return false;
});
$(document).on('click','#delItem', function() {
if( i > 2 ) {
$(this).parents('span').remove();
i--;
}
return false;
});
});
});
</script>

Hocam söylediğiniz şekilde yaptım. Bu sefer 2. yide aramalı bir şekilde ekledi fakat tekrar ekleye basınca 3. yü ve sonrasında gelenleri yine eklentisiz select olarak getirdi. Ve 2. gelen aramalı select silinmiyor. Resim aşağıda ki gibi .





Console'a baktığım zaman Ekleye basınca "Uncaught query function not defined for Select2 s2id_autogen5" hatası veriyor. Javascriptten pek anlamıyorum o yüzden hatanın neyden kaynaklandığını anlayamıyorum



Hocam sorunu çözdüm
$("select.select2").select2();
olarak yapınca kodu düzeldi. Bilgilerin için teşekkürler