Bagaimana cara mengubah dipilih nilai select2 dropdown dengan JqGrid?

Untuk select2 versi >= 4.0.0

Solusi lain mungkin tidak bekerja, namun contoh-contoh berikut harus bekerja.

Solusi 1: Penyebab semua terpasang mengubah peristiwa-peristiwa yang memicu, termasuk select2

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

Solusi 2: Penyebab HANYA select2 perubahan acara untuk memicu

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

Melihat ini jsfiddle. untuk contoh ini. Terima kasih untuk @minlare untuk Solusi 2.

Penjelasan:

Katakanlah saya memiliki seorang sahabat pilih dengan orang-orang's nama. Jadi Bob, Bill dan John (dalam contoh ini saya asumsikan Nilai yang sama sebagai nama). Pertama saya menginisialisasi select2 saya pilih:

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

Sekarang saya secara manual pilih Bob di browser. Berikutnya Bob melakukan sesuatu yang nakal dan aku don't seperti dia lagi. Sehingga sistem membatalkan pilihan atas Bob untuk saya:

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

Atau katakanlah saya membuat sistem pilih berikutnya dalam daftar bukan Bob:

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

Catatan di Pilih 2 website (lihat Usang dan dihapus metode) yang mungkin berguna bagi orang lain:

.select2('val') "val" metode yang telah usang dan akan dihapus dalam Select2 4.1. Deprecated metode tidak lagi termasuk triggerChange parameter.

Anda harus langsung menghubungi .val di mendasari <select> elemen sebaliknya. Jika anda membutuhkan parameter kedua (triggerChange), anda juga harus memanggil .pemicu("mengubah") pada elemen.

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

Melihat select2 docs yang anda gunakan di bawah ini untuk mendapatkan/menentukan nilai.

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

@PanPipes telah menunjukkan bahwa ini telah berubah 4.x (pergi melemparkan dia upvote di bawah ini). val sekarang disebut langsung

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

Jadi dalam loadComplete dari jqGrid anda bisa mendapatkan apa pun nilai anda mencari untuk kemudian mengatur selectbox nilai.

Pemberitahuan dari docs

Perhatikan bahwa dalam rangka untuk menggunakan metode ini anda harus menentukan initSelection fungsi dalam pilihan sehingga Select2 tahu bagaimana untuk mengubah id dari objek yang anda lulus di val() untuk objek penuh itu kebutuhan untuk membuat pilihan. Jika anda memasang ke pilih elemen fungsi ini sudah disediakan untuk anda.

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

ini harus bisa membantu.

Ini harus menjadi lebih mudah.

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

Tapi pastikan nilai-nilai yang lulus sudah ada di HTMl

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

1. Tambahkan Pilihan baru untuk <select>:

var opt = "" + newLabel+ " "; $(selLocationID).html(opt);

2. Pemicu <select> mengubah ke nilai yang dipilih:

$(selLocationID).val('newValue').pemicu("mengubah");

Hanya ingin menambahkan jawaban kedua. Jika anda memiliki sudah diberikan pilih sebagai select2, anda akan perlu untuk memiliki yang tercermin dalam selector sebagai berikut:

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

Anda memiliki dua pilihan - sebagai @PanPipes jawaban serikat yang dapat anda lakukan sebagai berikut.

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

Ini adalah solusi yang dapat diterima hanya jika salah satu doesn't memiliki tindakan kustom binded untuk mengubah acara. Solusi yang saya gunakan dalam situasi ini adalah untuk memicu select2 peristiwa tertentu yang update select2 ditampilkan pilihan.

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

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

Dengan pilihan: "opsi string1 /pilihan" digunakan:

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

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

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

Harapan ini membantu seseorang berjuang dengan masalah yang sama.

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

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

Ini akan mengatur tidak hanya nilai di belakang layar tapi juga tampilan teks untuk select2.

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

jika anda ingin memilih satu nilai maka gunakan $('#pilih').val(1).perubahan()

jika anda ingin memilih beberapa nilai-nilai yang kemudian set nilai dalam array sehingga anda dapat menggunakan kode ini $('#pilih').val([1,2,3]).perubahan()

lakukan ini

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

Saya Diharapkan kode :

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

bekerja dengan sempurna terima kasih untuk @PanPipes untuk berguna satu.

jika anda memiliki ajax sumber data, silakan klik untuk bug gratis

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

// Mengatur Select2 kontrol

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

// Mengambil item terpilih, dan menambah 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 mengetahui teks dari daftar drop-down dan don't tahu nilai, berikut adalah contohnya:

Katakan anda tahu timezone dan ingin mengatur itu, tetapi nilai-nilai yang telah time_zone_id di 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
        }
    });
});

Jenis huruf : Pilih 2 dokumentasi

anda hanya dapat menggunakan get/set metode untuk menetapkan 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