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

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