Select2 değerini sıfırla ve yer tutucuyu göster

Select2 ile değer sıfırlamada yer tutucuyu nasıl ayarlarım? Örneğimde, konumlar veya sınıf seçme kutuları tıklanırsa ve select2 öğemin select2 değerinden daha büyük bir değeri sıfırlanırsa ve varsayılan yer tutucuyu göstermelidir. Bu komut dosyası değeri sıfırlıyor ancak yer tutucuyu göstermiyor

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

Select2 öğesini şöyle tanımlamanız gerekir:

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

Seçimi sıfırlamak için 2

$("#customers_select").select2("val", "");

Select2 API'lerini değiştirdi:

Select2: select2("val")Yöntem kullanımdan kaldırıldı ve sonraki Select2 sürümlerinde kaldırılacak. Bunun yerine $ element.val () kullanın.

Bunu şimdi yapmanın en iyi yolu:

$('#your_select_input').val('');

Edit: December 2016 Comments, aşağıdakilerin bunu yapmanın güncellenmiş yolu olduğunu göstermektedir:

$('#your_select_input').val([]);

Kabul edilen cevap benim durumumda çalışmıyor. Bunu deniyorum ve çalışıyor:

Select2 tanımla:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

veya

$("#customers_select").select2({
    placeholder: "Select a State"
});

Sıfırlamak:

$("#customers_select").val('').trigger('change')

veya

$("#customers_select").empty().trigger('change')

Benim için işe yarayabilecek tek şey:

$('select2element').val(null).trigger("change")

Sürüm 4.0.3 kullanıyorum

Referans

Select2 Belgelerine Göre

Select2 sürüm 4.0.9 ile bu benim için çalışıyor:

$( "#myselect2" ).val('').trigger('change');

Select2 belirli bir CSS sınıfı kullanır, bu yüzden sıfırlamanın kolay bir yolu:

$('.select2-container').select2('val', '');

Ve aynı formda birden fazla Select2 varsa, hepsi bu tek komutla sıfırlanacak.

Bunu kullan :

$('.select').val([]).trigger('change');

SEÇİLMİŞ DEĞERİ KALDIRMAK İÇİN

$('#employee_id').select2('val','');

SEÇENEK DEĞERLERİNİ TEMİZLEME

$('#employee_id').html('');

Bu eski bir soru olduğunu biliyorum, ama bu select2 sürüm 4.0 için çalışıyor

 $('#select2-element').val('').trigger('change');

veya

$('#select2-element').val('').trigger('change.select2'); 

buna bağlı değişiklik olaylarınız varsa

Select2'yi yapılandırmak için aşağıdakileri kullanın

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

Ve girişi programlı olarak temizlemek için

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

Doğru yol budur:

 $("#customers_select").val('').trigger('change');

Select2'nin son sürümünü kullanıyorum.

Öncelikle select2'yi şöyle tanımlamanız gerekir:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Select2 öğesini sıfırlamak için aşağıdaki kod bloğunu kullanabilirsiniz:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

Seçiminizi şu şekilde silebilirsiniz:

$('#object').empty();

Ama sizi yer tutucunuza geri döndürmeyecek.

Yani bu yarım bir çözüm

Yukarıdaki çözümleri denedim ama benim için işe yaramadı.

Bu, değişikliği tetiklemeniz gerekmeyen bir tür hack'tir.

$("select").select2('destroy').val("").select2();

veya

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

Uzak verileri yükleyen kullanıcılar için bu , a2x'i tetiklemeden select2'yi yer tutucuya sıfırlar. V4.0.3 ile çalışır:

$("#lstProducts").val("").trigger("change.select2");

Yani, formu sıfırlamak için bazılarınızda bir sıfırlama düğmesi olacaktır. Komut dosyası etiketine aşağıdaki kodu ekleyin

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

Veya yalnızca yer tutucu tutmadan seçim alanını boşaltmak için:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

Yer tutucu için

$("#stateID").select2({
    placeholder: "Select a State"
});

Bir seçimi sıfırlamak için 2

$('#stateID').val('');
$('#stateID').trigger('change');

Bu yardımcı olur umarım

Tavsiye edilen yolu takip ederek . Https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder dokümanında bulundu (bu oldukça yaygın bir sorun gibi görünüyor) :

Bu olduğunda, genellikle <option></option>ilk seçenek olarak bir boşluğunuz olmadığı anlamına gelir <select>.

de olduğu gibi:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

Ben de bu sorunu yaşıyordu ve yer tutucu sıfırlanmadan önce val(null).trigger("change");bir No select2/compat/inputDatahata atmak kaynaklanıyor . Hatayı yakalayıp doğrudan yer tutucuyu (genişlikle birlikte) ayarlayarak çözdüm. Not: Birden fazla varsa, her birini yakalamanız gerekir.

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

Select2 4.0.3 kullanıyorum

v.4.0.x itibariyle ...

değerleri temizlemek, aynı zamanda yer tutucu kullanımını geri yüklemek için ...

.html('<option></option>');  // defaults to placeholder

boşsa, ilk seçenek öğesini seçer, bunun yerine istediğiniz şey olmayabilir

.html(''); // defaults to whatever item is first

açıkçası ... Select2 popo böyle bir acı, yerini değiştirmedi beni şaşırtıyor.

Ben yukarıdaki çözümleri denedim ama hiçbiri sürüm 4x ile çalıştı.

Ne elde etmek istiyorum: tüm seçenekleri temizleyin ama yer tutucusuna dokunmayın. Bu kod benim için çalışıyor.

selector.find('option:not(:first)').remove().trigger('change');

Select2 sürüm 3.2 kullanarak bu benim için çalıştı:

$('#select2').select2("data", "");

Uygulamaya gerek yoktu initSelection

Burada ilk 10 çözümü denedikten ve başarısız olduktan sonra, bu çözümü çalışmak için buldum (bkz.

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

Değişiklik daha sonra yapılır:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(Yazar aslen var $select = $(this[1]);, var $select = $(this[0]);yukarıda gösterdiğim bir yorumcunun düzeltildiğini gösterdi .)

Bu kodu js dosyanıza kullanın

$('#id').val('1');
$('#id').trigger('change');

Bunu kullanarak değeri silmeden önce $("#customers_select").select2("val", ""); Sıfırlama tıklaması üzerinde başka bir denetime odaklanmayı deneyin.

Bu, yer tutucuyu tekrar gösterecektir.

DOM arayüzü zaten başlangıç ​​durumunu takip ediyor ...

Yani aşağıdakileri yapmak yeterlidir:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

Ne zaman yapsam

$('myselectdropdown').select2('val', '').trigger('change');

Üç ila dört tetikleyiciden sonra bir tür gecikme yaşamaya başladım. Sanırım bir bellek sızıntısı var. Bu benim kod içinde değil çünkü bu satırı kaldırmak, benim app gecikme ücretsizdir.

AllowClear seçeneklerinin true olarak ayarlanmış olması nedeniyle,

$('.select2-selection__clear').trigger('mousedown');

Bunu $ ('myselectdropdown') izleyebilir. Select2 ('close'); açık öneri açılır menüsünü kapatmak istemeniz durumunda select2 dom öğesinde olay tetikleyicisi.

Bunu yapmak için bir [çok] hacky yolu (sürüm 4.0.3 için çalıştığını gördüm):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

• allowClear öğesi true olarak ayarlanmalıdır
• select öğesinde boş bir seçenek bulunmalıdır

Benim çözümüm:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

$('myselectdropdown').select2('val', '0')

burada 0, açılır listenin ilk değerinizdir