Setel ulang nilai select2 dan tampilkan placeholder

212

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;
   }
});
fefe
sumber

Jawaban:

238

Anda harus mendefinisikan select2 sebagai

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

Untuk mereset select2

$("#customers_select").select2("val", "");
AbdelMalek
sumber
7
Saya mencoba ini dengan <select multiple>, tetapi saya mendapatkan error: Opsi 'initSelection' tidak diperbolehkan untuk Select2 ketika dilampirkan ke elemen <select>.
Sorin Postelnicu
14
Ini tidak bekerja untuk saya. Placeholder masih tidak muncul.
bb
5
Lihat jawaban @Lego Stormtroopr di bawah ini, yang mencerminkan metode baru sesuai dengan Select2's API. Metode di atas sudah usang.
David
14
Pada v4.0.3, sepertinya tidak .select2("val", "")berfungsi lagi.
adamj
30
$("#customers_select").val('').trigger('change') ;Saya menggunakan ini dan itu berhasil.
Akshay Kulkarni
125

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([]);
Hakan Fikst
sumber
135
Ini memperbarui nilai, tetapi untuk itu muncul dengan benar, Anda harus memicu acara perubahan. $('#your_select_input').val('').trigger('change')
Saneem
5
Ini tidak bekerja untuk saya. Placeholder masih tidak muncul.
bb
3
Ini berfungsi untuk saya dengan changetambahan pemicu, tetapi juga memicu pustaka validasi yang kami gunakan - untuk saat ini saya harus menggunakan versi yang sudah tidak digunakan lagi.
Dave Newton
6
Ini tidak berfungsi dengan benar, menggunakan select2 4.0.2. Ini akan mengatur ulang pemilihan dan mengembalikan placeholder, tetapi ketika saya memilih nilai baru (post reset), saya juga melihat pilihan "string kosong" yang dipilih (yaitu, sebuah kotak dengan hanya "x" di dalamnya).
kounoupis
1
$ ('# your_select_input'). val (''). trigger ('change') hanya berfungsi ketika placeholder diberikan. Jika tidak, opsi string kosong akan ditampilkan sebagai opsi yang dipilih.
amol
115

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')
NorthCat
sumber
2
Saya menemukan bahwa kecuali jika Anda menentukan placeholder, allowClear tidak berfungsi
Dan Tappin
Tidak $('#your_select_input').val('').trigger('change')juga $('#your_select_input').val('');tidak berfungsi di Firefox
Alex Art.
1
ini berfungsi untuk saya, menghapus semua data dari select2 yang saya gunakan v4.0.3
ClearBoth
8
$ ("# customers_select"). empty (). trigger ('change') berfungsi untuk saya. :)
Munna Khan
1
'$ ("# customers_select"). empty (). trigger (' change ')' bekerja untuk saya, terima kasih!
Tahirhan
52

Satu-satunya hal yang dapat bekerja untuk saya adalah:

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

Saya menggunakan versi 4.0.3

Referensi

Menurut Dokumentasi Select2

M.Tae
sumber
2
Saya juga menggunakan v4.0.3 dan $('select2element').val("").trigger("change")bekerja dengan baik juga.
Roubi
Harap dicatat bahwa Anda juga harus memiliki <option> kosong di dalam <seleksi> Anda. Jika Anda menggunakan ajax dengan select2, ini akan membantu - $ ('# selectFieldId'). Prepend ('<option selected = "selected"> </option>')
musicjerm
19

Dengan Select2 versi 4.0.9 ini berfungsi untuk saya:

$( "#myselect2" ).val('').trigger('change');
IlludiumPu36
sumber
1
Ini membuat dropdown select2 saya kosong. Bekerja untukku. Terima kasih.
disha
18

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.

Marcio Mazzucato
sumber
15

Gunakan ini :

$('.select').val([]).trigger('change');
Sachin Gend
sumber
Bagi saya, bekerja dengan $ ('. Select2'). Val ([]). Trigger ('change');
Marcelo Agimóvel
11

UNTUK MENGHAPUS NILAI TERPILIH

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

UNTUK MEMBERSIHKAN NILAI OPSI

$('#employee_id').html('');
Shanka SMS
sumber
1
fefe meminta pengaturan ulang teks placeholder. Jadi hanya bagian pertama dari jawaban ini yang valid.
nterms
2
Ya itu sebabnya saya menyoroti judul jawaban.
Shanka SMS
2
Jawaban pertama memang sudah tidak berlaku lagi dari> 4.0. Tapi opsi kedua menyelamatkan saya! Ini adalah solusi ketika Anda ingin benar-benar menghapus select2. Hanya mengatur .val ('') untuk memilih 2 itu tidak cukup. Anda juga perlu menghapus html. Terima kasih banyak!!!
wazza
8

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

Sean
sumber
Solusi yang sangat baik. Saya harus menambahkan fungsi .last () untuk menargetkan kotak select2 yang baru ditambahkan. $('#select2-element').last().val('').trigger('change.select2');
InsParbo
8

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");
Zabith Rafeek
sumber
7

Ini cara yang benar:

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

Saya menggunakan rilis Select2 terbaru.

TreeZ
sumber
6

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");
Mahmut Aydın
sumber
6

Anda dapat menghapus pilihan oleh

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

Tapi itu tidak akan mengubah Anda kembali ke pengganti Anda.

Jadi ini solusi setengahnya

Rodrigo Butta
sumber
5

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();
});
tech_boy
sumber
5

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");
Chad Kuehn
sumber
Bekerja untuk saya tetapi pemicu saya hanya 'berubah'
Gregory R. Sudderth
Ini adalah satu-satunya solusi yang berfungsi bagi saya untuk mereset Select2 dari Select2 lain menggunakan data Ajax.
IlludiumPu36
5

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([]);
 });
Alisha Lamichhane
sumber
3

Untuk dudukan tempat

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

Untuk mereset pilihan 2

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

Semoga ini membantu

Rinto George
sumber
2

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>
fmsf
sumber
2

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

Aba
sumber
Sepertinya Anda memiliki pendengar yang terikat pada changeacara tersebut. Coba picu change.select2- itu tidak akan memicu pendengar yang terikat (lihat github.com/select2/select2/issues/3620 ).
Paul
2

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.

malam hari
sumber
1

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');
R. Canser Yanbakan
sumber
Jika Anda menggunakan selector.find ('option: not (: first)'). Html (''); itu harus bekerja.
wazza
1

Menggunakan select2 versi 3.2 ini bekerja untuk saya:

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

Tidak perlu diimplementasikan initSelection

shak
sumber
1
Sejauh ini, ini adalah cara paling sederhana bagi saya untuk melakukannya. Metode lain tidak berhasil untuk saya.
chevybow
1

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

guero64
sumber
1

Gunakan kode ini ke file js Anda

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

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

Ini akan menampilkan placeholder lagi.

pengguna2243380
sumber
0

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;
    });
});
Andrew Nartey
sumber
0

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.

Akhilesh Balachandder
sumber
0

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
Ellery Newcomer
sumber
0

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');
    });
Daniel Ortegón
sumber
0
$('myselectdropdown').select2('val', '0')

di mana 0 adalah nilai pertama dropdown Anda

Momaad Jamshed Alam
sumber