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

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?

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

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.

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

ini seharusnya bisa membantu.

Ini seharusnya lebih mudah.

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

Tetapi pastikan nilai yang Anda berikan sudah ada dalam HTMl

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

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

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

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.

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

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

Kode saya yang diharapkan:

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

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

melakukan hal ini

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

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

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

// 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

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