Dinamik "seçilmiş" öğe seçme

Question

Seçilen jQuery eklentisini (Harvest) kullanıyorum. (Document) .ready üzerinde çalışıyor, ancak tıklandığında, "select" özelliğini kullanmak istediğim daha fazla select nesnesi dinamik olarak oluşturmak için ajax kullanan bir butonum var. Bununla birlikte, yalnızca orijinal seçim öğeleri "seçilmiş" özelliklere sahiptir ve yeni (dinamik olarak oluşturulmuş) çalışmaz. Yeni öğeleri eklemek için jQuery.get kullanıyorum. İşte bir kod örneğidir:

jQuery(".select").chosen();//this one loads correctly 
jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
      //response contains html with 2 more select elements with 'select' class 
      jQuery('#stages').append(response); 
     jQuery(".select").chosen();//this one doesn't seem to do anything :-(
    }); 
}); 

ben bir yerde .live() fonksiyonunu gerektiğini düşünüyordum, ama henüz bunu anlamaya edemedik. Herhangi bir yardım çok takdir edilir!

Not -trigger("liszt:updated");

Answer 1

response elemanları select sınıf olduğundan emin olun kullanarak belgesinde belirtilen şekilde ben, dinamik yeni seçenekler yüklemeye çalışmıyorum.

console.log(response); // to verify 

Eklentiyi yalnızca yeni öğeye/öğelere uygulamak iyi bir fikir olabilir. /myurl bütün bir HTML belgesini dönüyor eğer

jQuery(".select").chosen(); 

jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
     console.log(response); // verify the response 

     var $response = $(response); // create the elements 

     $response.filter('.select').chosen(); // apply to top level elems 
     $response.find('.select').chosen(); // apply to nested elems 
     $response.appendTo('#stages'); 
    }); 
}); 

Ayrıca, yanlış sonuçları alabilirsiniz.

Answer 2

Chosen ile benzer bir sorun yaşadım. Kullanıcı bir bağlantıyı tıkladıktan sonra dinamik olarak yeni bir seçim eklemeyi deniyordum. Önceki seçimi klonladıktan sonra klon ekledim, ancak Seçilmiş seçenekler çalışmayacaktı. Eğer ajax ile seçilen kullanabilirsiniz

clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove(); 
mySelect.after(clonedSelect); 
clonedSelect.find('select').chosen(); 

Answer 3

tek yönlü: çözüm, Seçilmiş sınıf ve katma elemanları şerit DOM'da klon koyun ve sonra tekrar seçilen çalıştırabilen oldu

$.ajax({ 
    url: url, 
    type: 'GET', 
    dataType: 'json', 
    cache: false, 
    data: search 
}).done(function(data){ 
    $.each(data, function(){ 
    $('<option />', {value: this.value, text: this.text}).appendTo(selectObj); 
    }); 
    chosenObj.trigger('liszt:updated'); 
}); 

selectObj olduğunu özellikle seçme nesne

Ama ...

Seçilmiş çok kötü uygulanmaktadır. Bazı görsel hataları vardır, örneğin: bir seçenek seçin, sonra yeni bir arama yapmaya başlayın, sonra seçili olanları kaldırmaya devam edin - 'Bazı seçenekleri seç', 'Bazı seçenekleri seç' arama değeri gibi genişletilmiş. JQuery zincirlemesini desteklemiyor. Eğer AJAX'ı uygulamaya çalışacaksanız, seçmiş olduğunuz odağı serbest bıraktığınızda metinlerin kaybolduğunu göreceksiniz, şimdi tekrar tıklayacağınız zaman bazı değerler gösterecektir. Bu değerleri kaldırmayı deneyebilirsiniz, ancak zor bir zaman olacaktır çünkü 'bulanıklaştırma' olayını kullanamazsınız, çünkü bazı değerleri seçerken de yanar. Özellikle AJAX ile seçilmemeyi öneririm.

Answer 4

1.- Livequery plugin'u indirin ve sayfanızdan arayın.

2.- Kraken'ı bırakın: Bu dinamik ajax her seferinde kullanarak yeni seçenekler formu veritabanı yüklenirken Seçilmiş bir örnektir bu

$(".select").trigger("chosen:updated"); 

Answer 5

Seçilen tıklandı.

$('.my_chonsen_active').chosen({ 
    search_contains:true 
}); 
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){ 
    id_tosend=$(this).attr("id").toString(); 
    $.get("ajax/correspondance/file.php",function(data){ 
    $('#'+id_tosend).empty(); 
    $('#'+id_tosend).append(data); 
    $('#'+id_tosend).trigger("chosen:updated"); 
    }); 
}); 

Answer 6

gelirse yaz (belirli doldurun) size kodundan sonra $(".select").livequery(function() { $(this).chosen({}); });