Bagaimana cara mengubah nilai yang dipilih dari dropdown select2 dengan JqGrid?


178

Saya menggunakan demo select2 Oleg , tapi saya bertanya-tanya apakah mungkin untuk mengubah nilai yang dipilih saat ini di menu dropdown.

Misalnya, jika empat nilai yang dimuat adalah: "Any", "Fruit", "Vegetable", "Meat"dan daftar dropdown default ke "Any", bagaimana saya bisa mengubahnya ke "Fruit"dalam acara JqGrid loadComplete?

Apakah ini mungkin?

Jawaban:


407

Untuk versi select2> = 4.0.0

Solusi lain mungkin tidak berfungsi, namun contoh berikut ini harus berfungsi.

Solusi 1: Menyebabkan semua peristiwa perubahan terlampir untuk memicu, termasuk select2

$('select').val('1').trigger('change');

Solusi 2: Penyebab JUST select2 ubah acara untuk memicu

$('select').val('1').trigger('change.select2');

Lihat jsfiddle ini untuk contohnya. Terima kasih kepada @minlare untuk Solusi 2.

Penjelasan:

Katakanlah saya punya sahabat pilih dengan nama orang. Jadi Bob, Bill, dan John (dalam contoh ini saya asumsikan nilainya sama dengan namanya). Pertama saya menginisialisasi select2 pada pilih saya:

$('#my-best-friend').select2();

Sekarang saya secara manual memilih Bob di browser. Selanjutnya Bob melakukan sesuatu yang nakal dan aku tidak menyukainya lagi. Jadi sistem membatalkan pilihan Bob untuk saya:

$('#my-best-friend').val('').trigger('change');

Atau katakan saya membuat sistem memilih yang berikutnya dalam daftar alih-alih Bob:

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');  

Catatan pada situs web Select 2 (lihat Metode usang dan dihapus ) yang mungkin berguna untuk orang lain:

.select2 ('val') Metode "val" telah usang dan akan dihapus di Select2 4.1. Metode yang tidak lagi digunakan tidak lagi menyertakan parameter triggerChange.

Anda harus langsung memanggil .val pada elemen yang mendasarinya. Jika Anda membutuhkan parameter kedua (triggerChange), Anda juga harus memanggil .trigger ("change") pada elemen.

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

8
Ini adalah jawaban yang tepat: ia bekerja dalam mono-pilih dan multi-pilih
Giovanni Di Milia

4
Ini adalah solusi yang dapat diterima hanya jika seseorang tidak memiliki tindakan khusus yang terikat pada changeacara tersebut (seperti memuat ulang formulir). Kalau tidak, tindakan-tindakan itu akan dipanggil secara berlebihan setelah dipicu change().
van_folmert

Jika ini tidak berfungsi dengan benar, tambahkan setTimeout: setTimeout (function () {$ ("select"). Val ("1"). Trigger ("change");}, 1000);
Abel

@van_folmert Saya punya masalah yang sama. Idealnya, saya ingin mengubah apa yang ditampilkan sebagai yang dipilih, tanpa memulai acara (karena saya punya kebiasaan yang terikat pada onChange)
onebree

1
Lihat jawaban saya di bawah ini untuk contoh bagaimana mengatasi masalah
@van_folmert

135

Melihat dokumen select2 yang Anda gunakan di bawah ini untuk mendapatkan / mengatur nilainya.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes telah menunjukkan bahwa ini telah berubah untuk 4.x (buka undiannya di bawah). valsekarang disebut secara langsung

$("#select").val("CA");

Jadi di dalam loadCompletejqGrid Anda bisa mendapatkan nilai apa pun yang Anda cari kemudian mengatur nilai kotak pilih.

Pemberitahuan dari dokumen

Perhatikan bahwa untuk menggunakan metode ini, Anda harus mendefinisikan fungsi initSelection dalam opsi sehingga Select2 tahu bagaimana mengubah id objek yang Anda masukkan val () ke objek penuh yang diperlukan untuk membuat seleksi. Jika Anda melampirkan ke elemen pilih fungsi ini sudah disediakan untuk Anda.


Tampaknya tidak berfungsi dengan demo yang saya lihat. Tidak yakin mengapa, mungkin ada hubungannya dengan cara plugs ke JqGrid.
Adam K Dean

1
Diperbarui jawabannya. Sepertinya Anda harus menambahkan fungsi itu secara manual ke inisialisasi select2 sehingga ia tahu cara menangani valpanggilan.
Jack

1
@AdamKDean: Seseorang dapat menguji tambahan apakah <select>dikonversi ke select2kontrol dengan menguji keberadaan kelas select2-offscreendi <select>. Semua elemen toolbar pencarian memiliki id yang dimulai dengan gs_awalan dan memiliki nama seperti di colModel. Anda bisa menggunakannya getGridParamuntuk mendapatkannya colModel.
Oleg

Terima kasih, saya sudah berhasil mendapatkan informasi filter, saya hanya perlu cara untuk mengaturnya setelah bar filter dibuat kembali dengan select2pilih. Saya akan melihat lagi hari ini, mungkin dengan mata segar saya bisa memperbaikinya. Terima kasih lagi. Pembaruan: membungkus kode dalam pemeriksaan boolean memperbaiki masalah yang saya alami, meskipun berhenti menyegarkan dari bilah pencarian daripada memilih elemen sebelumnya lagi.
Adam K Dean


32
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

ini seharusnya bisa membantu.


3
Contoh nilai berganda: this. $ ("# YourSelector"). Select2 ("data", [{id: 1, text: "Some Text"}, {id: 2, text: "Some Other Text"}]);
RodneyRd

18

Ini seharusnya lebih mudah.

$("#e1").select2("val", ["View" ,"Modify"]);

Tetapi pastikan nilai yang Anda berikan sudah ada dalam HTMl


17

Jika Anda ingin menambahkan value='newValue'dan text='newLabel', Anda harus menambahkan kode ini:

  1. Tambahkan Opsi baru ke <select>:

    var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
    $(selLocationID).html(opt);
  2. Pemicu <select>perubahan ke nilai yang dipilih:

    $(selLocationID).val('newValue').trigger("change");

Saya menemukan ini lebih bersih daripada mengacaukan select2 'data' :) Ubah dom, biarkan select2 mencari tahu sisanya.
Paulj

Saya menguji di Safari, dan ini adalah satu-satunya solusi yang benar-benar berfungsi. Yang lain lebih fasih dan saya lebih suka mereka, tetapi lebih dari segalanya, saya lebih suka kode kerja. Dan ini dia. :)
David

Terima kasih banyak untuk ini! Saya bekerja dengan memilih 2 kotak di mana kedua kotak diisi dengan Ajax dan saya menggunakan properti data tambahan untuk kotak pertama untuk mengatur nilai kotak kedua menggunakan ini. Sekali lagi terimakasih!!!!
Sam

16

Hanya ingin menambahkan jawaban kedua. Jika Anda telah membuat pilih sebagai select2 , Anda harus memiliki yang tercermin dalam pemilih Anda sebagai berikut:

$("#s2id_originalSelectId").select2("val", "value to select");

12

Anda memiliki dua opsi - karena jawaban @PanPipes menyatakan Anda dapat melakukan hal berikut.

$(element).val(val).trigger('change');

Ini adalah solusi yang dapat diterima hanya jika seseorang tidak memiliki tindakan khusus yang terikat pada acara perubahan. Solusi yang saya gunakan dalam situasi ini adalah untuk memicu acara khusus select2 yang memperbarui pilihan yang ditampilkan select2.

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

Ya, ini adalah solusi all-around terbaik. Sungguh, saya pikir Select2 harus memicu acara internal 'change.select2' secara otomatis untuk memperbarui tampilan ketika nilainya berubah. Tapi, ini setidaknya menyediakan cara sederhana untuk memperbarui tampilan agar sesuai dengan nilai baru, tanpa memicu penangan perubahan acara kustom.
DaveInMaine

'$ (elemen) .val (val) .trigger ini (' change.select2 ');' bekerja untukku. @Minlare terima kasih.
Ray

9

Memiliki beberapa masalah dengan pengaturan opsi String yang dipilih di select2:

Dengan opsi: "option string1 / option" digunakan:

$('#select').val("string1").change(); 

TETAPI dengan opsi dengan nilai: nilai opsi "E" string1 / option:

$('#select').val("E").change(); // you must enter the Value instead of the string

Berharap ini membantu seseorang yang berjuang dengan masalah yang sama.


5

jika Anda ingin memilih satu nilai kemudian gunakan $('#select').val(1).change()

jika Anda ingin memilih beberapa nilai, maka tetapkan nilai dalam array sehingga Anda dapat menggunakan kode ini $('#select').val([1,2,3]).change()


ini tidak akan berfungsi jika Anda memasukkan string di bawah tanda kurung siku.
Utkarsh Pandey

5

Untuk V4 Select2 jika Anda ingin mengubah nilai select2 dan representasi teks dari drop down.

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

Ini tidak hanya akan mengatur nilai di balik layar tetapi juga tampilan teks untuk select2.

Ditarik dari https://select2.github.io/announcements-4.0.html#removed-methods


Coba trigger ('change.select2'). Trigger ('select2: select'); jika perubahan saja tidak cukup
Tebe

4

Kode saya yang diharapkan:

$('#my-select').val('').change();

bekerja dengan sempurna terima kasih kepada @PanPipes untuk yang bermanfaat.


4

melakukan hal ini

 $('select#id').val(selectYear).select2();

Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
rollstuhlfahrer

Saya tidak memiliki pengetahuan tentang JqGrid tetapi dengan kode ini Anda dapat mengubah nilai select2 dengan cara sederhana
Jaskaran singh Rajal

2

jika Anda memiliki sumber data ajax silakan lihat ini untuk bug gratis

https://select2.org/programmatic-control/add-select-clear-items

// Atur kontrol Select2

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Ambil item yang dipilih sebelumnya, dan tambahkan ke kontrol

var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

1

jika Anda ingin mengatur item yang dipilih ketika Anda tahu teks dari daftar drop-down dan tidak tahu nilainya, berikut adalah contohnya:

Katakanlah Anda mengetahui zona waktu dan ingin mengaturnya, tetapi nilainya ada time_zone_iddi dalamnya.

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2'); 

0
// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

Font: Pilih 2 dokumentasi


0

Anda cukup menggunakan metode get / set untuk mengatur nilai

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

atau Anda dapat melakukan ini:

$('#select').val("E").change(); // you must enter the Value instead of the string
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.