<select name="test"class="form-control select2" style="width: 100%;" id="search"> <!-- JQUERY İLE GELEN OPTİON SEÇENEKLERİ --> </select>Yukarıdaki select2 kütüphanesine ait olan (aramalı/filtreli html select nesnesi) düz bir şekilde htmle eklendiğinde çalışıyor. Option seçenekleri jQuery ile aşağıdaki kod yardımı ile alınıyor. Sorunsuz çalışmakta.
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#search").select2({
placeholder: "placeholder",
allowClear: false,
ajax: {
url: "POSTURL",
type: "POST",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
globalJson = response;
return {
results: response
};
},
cache: true
}
});
});
</script>Sorun şu ki, yukarıdaki HTML koudunu herhangi bir yere manuel olarak yapıştırınca çalışıyor fakat jQuery ile ekle butonu yapıp bu alanı mevcut htmle eklediğim de çalışmıyor.Ekleme butonu kodu kodu:
jQuery:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('#add'); //Add button selector
var wrapper = $('#newField'); //Input field wrapper
var fieldHTML = '<select name="test"class="form-control select2" style="width: 100%;" id="search"><!-- JQUERY İLE GELEN OPTİON SEÇENEKLERİ --></select>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '#remove', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>Demek istediğim; birebir aynı yere el ile eklenen <select2 kodları> kodu çalışırken, append(<select2 kodları>) çalışmamakta. Seçenekler geliyor ancak arama barı gelmiyor. Yardımlarınız için şimdiden teşekkürler.
