Mengubah seleksi di pilih dengan plugin Chosen

105

Saya mencoba untuk mengubah opsi yang saat ini dipilih di pilih dengan plugin yang Dipilih.

The dokumentasi mencakup memperbarui daftar, dan memicu suatu peristiwa ketika sebuah opsi yang dipilih, tapi tidak ada (yang saya bisa melihat) pada perubahan eksternal nilai yang sedang dipilih.

Saya telah membuat jsFiddle untuk mendemonstrasikan kode dan cara saya untuk mengubah pilihan:

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});
gak
sumber
Saya tidak bisa menjalankan demonstrasi jsfiddle yang Anda berikan. bisakah Anda memperbaruinya.
Beruntung
Baik. Alasan saya tidak dapat menjalankan demonstrasi Anda adalah perpustakaan yang dipilih mengarah ke url yang salah. Ini jsfiddle yang
Lucky

Jawaban:

214

Dari bagian "Memperbarui yang Dipilih Secara Dinamis" di dokumen : Anda perlu memicu peristiwa 'yang dipilih: diperbarui' di lapangan

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

CATATAN: versi sebelum 1.0 menggunakan berikut ini:

$('select').trigger("liszt:updated");
Lucas Welper
sumber
6
FYI: mereka telah memperbarui ke 1.0 yang sekarang menggunakan chosen:updatedalih-alihliszt:updated
Henesnarfel
Saya tersandung di sini ketika saya mencoba menemukan cara untuk memilih opsi yang paling cocok saat ini dari daftar hasil pencarian yang dipilih banyak pilihan (setiap kali fokus hilang). Berikut biola singkat tentang penjelajahan saya. Anda tidak perlu acara untuk memicu acara apa pun. Mungkin, itu juga berguna untuk orang lain ... :)
Timo
meskipun kode di atas berfungsi, ini hanya terjadi sekali. Maksud saya jika saya mengklik lagi menu tempat plugin yang dipilih terpasang tidak mengambil nilai yang ada di dalam val (). Mengapa ini mungkin terjadi
Dimitris Papageorgiou
9
Saya tahu ini adalah posting lama - tetapi cara yang lebih sederhana untuk memperbarui hanya dalam satu string: $('select').val(2).trigger("chosen:updated");
Andrew Newby
10
@Lucas Welper: Anda juga harus berubah $('select').val(2);menjadi $('select').val(2).change();, karena mengubah opsi yang dipilih dengan jQuery tidak memicu peristiwa perubahan dan beberapa orang mungkin membutuhkannya.
machineaddict
41

Jawaban saya terlambat, tetapi saya ingin menambahkan beberapa informasi yang terlewat dalam semua jawaban di atas.

1) Jika Anda ingin memilih nilai tunggal di pilih.

$('#select-id').val("22").trigger('chosen:updated');

2) Jika Anda menggunakan beberapa pilihan yang dipilih, mungkin Anda perlu mengatur beberapa nilai sekaligus.

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

Informasi dikumpulkan dari tautan berikut:
1) Dokumen yang Dipilih
2) Diskusi Github Terpilih

Aamir
sumber
Memperhatikan bahwa "22", "25" dll .. adalah nilai, bukan HTML bagian dalam, misalnya <option value = "25"> someext </option>
Fadi Bakoura
2

Terkadang Anda harus menghapus opsi saat ini untuk memanipulasi opsi yang dipilih.

Berikut adalah contoh cara menyetel opsi:

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle (termasuk cara menambahkan opsi): https://jsfiddle.net/59x3m6op/1/

Tobi G.
sumber
1
Untuk memperhitungkan kasus ketika pilihan belum memiliki nilai, perbarui var selected = mySelect.val();ke var selected = mySelect.val() || [];.
ElliotSchmelliot
0

Dalam kasus beberapa jenis pilih dan / atau jika Anda ingin menghapus item yang sudah dipilih satu per satu, langsung dalam item daftar dropdown, Anda dapat menggunakan sesuatu seperti:

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
SlavisaPetkovic
sumber