Setel ulang nilai select2 dan tampilkan placeholder

Bagaimana cara menetapkan placeholder pada reset nilai oleh select2. Dalam contoh saya Jika lokasi atau kotak pilih tingkat diklik dan select2 saya memiliki nilai daripada nilai select2 harus mengatur ulang dan menunjukkan placeholder default. Skrip ini sedang mengatur ulang nilai tetapi tidak akan menampilkan placeholder

$("#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;
   }
});

Anda harus mendefinisikan select2 sebagai

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

Untuk mereset select2

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

Select2 telah mengubah API mereka:

Select2: select2("val")Metode ini sudah usang dan akan dihapus di versi Select2 nanti. Gunakan $ element.val () sebagai gantinya.

Cara terbaik untuk melakukan ini sekarang adalah:

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

Sunting: Desember 2016 Komentar menyarankan bahwa di bawah ini adalah cara yang diperbarui untuk melakukan ini:

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

Jawaban yang diterima tidak berfungsi dalam kasus saya. Saya mencoba ini, dan berhasil:

Tentukan select2:

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

atau

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

Untuk mengatur ulang:

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

atau

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

Satu-satunya hal yang dapat bekerja untuk saya adalah:

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

Saya menggunakan versi 4.0.3

Referensi

Menurut Dokumentasi Select2

Dengan Select2 versi 4.0.9 ini berfungsi untuk saya:

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

Select2 menggunakan kelas CSS tertentu, jadi cara mudah untuk meresetnya adalah:

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

Dan Anda memiliki keuntungan jika Anda memiliki beberapa Select2 pada bentuk yang sama, semuanya akan direset dengan perintah tunggal ini.

Gunakan ini :

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

UNTUK MENGHAPUS NILAI TERPILIH

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

UNTUK MEMBERSIHKAN NILAI OPSI

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

Saya tahu ini semacam pertanyaan lama, tetapi ini berfungsi untuk select2 versi 4.0

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

atau

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

jika Anda memiliki perubahan acara terikat padanya

Gunakan berikut ini untuk mengkonfigurasi select2

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

Dan untuk menghapus pilih input secara terprogram

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

Ini cara yang benar:

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

Saya menggunakan rilis Select2 terbaru.

Pertama, Anda harus mendefinisikan select2 seperti ini:

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

Untuk mengatur ulang select2, cukup Anda dapat menggunakan blok kode berikut:

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

Anda dapat menghapus pilihan oleh

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

Tapi itu tidak akan mengubah Anda kembali ke pengganti Anda.

Jadi ini solusi setengahnya

Saya mencoba solusi di atas tetapi tidak berhasil untuk saya.

Ini semacam peretasan, di mana Anda tidak perlu memicu perubahan.

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

atau

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

Untuk pengguna yang memuat data jarak jauh, ini akan mengatur ulang select2 ke placeholder tanpa melepaskan ajax. Bekerja dengan v4.0.3:

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

Jadi, untuk mereset form beberapa dari Anda akan memiliki tombol reset. Tambahkan kode berikut di dalam tag skrip

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

Atau hanya mengosongkan bidang pilih tanpa menjaga placeholder:

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

Untuk dudukan tempat

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

Untuk mereset pilihan 2

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

Semoga ini membantu

Mengikuti cara yang disarankan untuk melakukannya. Ditemukan dalam dokumentasi https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (ini tampaknya merupakan masalah yang cukup umum):

Ketika ini terjadi biasanya berarti Anda tidak memiliki kosong <option></option>sebagai opsi pertama di Anda <select>.

seperti dalam:

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

Saya juga mengalami masalah ini dan itu berasal dari val(null).trigger("change");melempar No select2/compat/inputDatakesalahan sebelum placeholder mendapat reset. Saya menyelesaikannya dengan menangkap kesalahan dan mengatur placeholder secara langsung (bersama dengan lebar). Catatan: Jika Anda memiliki lebih dari satu, Anda harus menangkap masing-masing.

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);

Saya menjalankan Select2 4.0.3

pada v.4.0.x ...

untuk menghapus nilai, tetapi juga mengembalikan penggunaan placeholder ...

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

jika kosong, ia akan memilih item opsi pertama yang mungkin bukan yang Anda inginkan

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

terus terang ... Select2 adalah rasa sakit di pantat, itu mengherankan saya itu belum diganti.

Saya sudah mencoba solusi di atas tetapi tidak ada yang bekerja dengan versi 4x.

Yang ingin saya capai adalah: hapus semua opsi tapi jangan sentuh placeholder. Kode ini berfungsi untuk saya.

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

Menggunakan select2 versi 3.2 ini bekerja untuk saya:

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

Tidak perlu diimplementasikan initSelection

Setelah mencoba 10 solusi pertama di sini dan gagal, saya menemukan solusi ini berfungsi (lihat komentar "nilov pada 7 April • diedit" di halaman):

(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);

Perubahan kemudian dibuat:

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

(Penulis awalnya menunjukkan var $select = $(this[1]);, yang dikoreksi oleh komentator var $select = $(this[0]);, yang saya tunjukkan di atas.)

Gunakan kode ini ke file js Anda

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

Sebelum Anda menghapus nilai menggunakan ini $("#customers_select").select2("val", ""); coba pengaturan ini untuk kontrol lain pada klik reset.

Ini akan menampilkan placeholder lagi.

Antarmuka DOM, sudah melacak status awal ...

Jadi melakukan yang berikut ini sudah cukup:

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

Baik setiap kali saya melakukannya

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

Saya mulai mendapatkan semacam kelambatan setelah sekitar tiga hingga empat pemicu. Saya kira ada kebocoran memori. Ini tidak ada dalam kode saya karena jika saya menghapus baris ini, aplikasi saya bebas lag.

Karena saya memiliki opsi allowClear yang disetel ke true, saya ikut

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

Ini dapat diikuti oleh $ ('myselectdropdown'). Select2 ('close'); pemicu acara pada elemen select2 dom jika Anda ingin menutup drop down saran terbuka.

Salah satu cara yang sangat rumit untuk melakukannya (saya melihatnya berfungsi untuk versi 4.0.3):

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

• allowClear harus disetel ke true
• opsi kosong harus ada di elemen pilih

Solusi saya adalah:

$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')

di mana 0 adalah nilai pertama dropdown Anda