JqGrid ile select2 açılır listesinin seçilen değerini nasıl değiştirebilirim?

Ben Oleg'in kullanıyorum Select2 demo , ama açılır menüden seçili değeri değiştirmek mümkün olup olmayacağını merak ediyorum.

Örneğin, yüklenen dört değer şuysa: "Any", "Fruit", "Vegetable", "Meat"ve açılır liste varsayılan olarak ayarlandıysa "Any", bunu "Fruit"JqGrid olayında nasıl değiştirebilirim loadComplete?

Mümkün mü?

Select2 sürümü için> = 4.0.0

Diğer çözümler işe yaramayabilir, ancak aşağıdaki örnekler işe yarayacaktır.

Çözüm 1: select2 dahil tüm bağlı değişiklik olaylarının tetiklenmesine neden oluyor

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

Çözüm 2: SADECE select2 değişiklik olayının tetiklenmesine neden oluyor

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

Bunların örnekleri için bu jsfiddle'a bakın . Çözüm 2 için @ minlare sayesinde.

Açıklama:

İnsanların isimleriyle seçtiğim en iyi arkadaşım olduğunu söyle. Bob, Bill ve John (bu örnekte, değerin adıyla aynı olduğunu varsayıyorum). Önce seçimimde select2'yi başlatırım:

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

Şimdi tarayıcıda el ile Bob'u seçiyorum. Sonra Bob yaramaz bir şey yapar ve artık onu sevmiyorum. Sistem benim için Bob'un seçimini kaldırıyor:

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

Veya sistemin Bob yerine listede bir sonraki seçmesini sağladığımı söyleyin:

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

Başkaları için yararlı olabilecek Select 2 web sitesiyle ilgili notlar (bkz. Kullanımdan kaldırılmış ve kaldırılmış yöntemler ):

.select2 ('val') "val" yöntemi kullanımdan kaldırıldı ve Select2 4.1'de kaldırılacak. Kullanımdan kaldırılan yöntem artık triggerChange parametresini içermiyor.

Bunun yerine doğrudan alttaki öğede .val öğesini çağırmalısınız. İkinci parametreye (triggerChange) ihtiyacınız varsa, öğe üzerinde .trigger ("change") öğesini de çağırmalısınız.

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

Select2 belgelerine bakarak , değeri almak / ayarlamak için aşağıdakileri kullanırsınız.

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

@PanPipes, bunun 4.x için değiştiğine dikkat çekti (ona aşağıdan bir oy verin). valşimdi doğrudan çağrılıyor

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

Böylece loadCompletejqGrid içinde aradığınız değeri elde edebilir ve sonra selectbox değerini ayarlayabilirsiniz.

Dokümanlardan bildirim

Bu yöntemi kullanmak için seçeneklerde initSelection işlevini tanımlamanız gerektiğine dikkat edin, böylece Select2 val () 'de ilettiğiniz nesnenin kimliğinin seçimi gerçekleştirmesi gereken tam nesneye nasıl dönüştürüleceğini bilir. Seçili bir öğeye bağlanıyorsanız, bu işlev sizin için zaten sağlanmıştır.

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

bu yardımcı olmalı.

Bu daha da kolay olmalı.

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

Ancak ilettiğiniz değerlerin HTMl'de zaten mevcut olduğundan emin olun

Yeni eklemek istiyorsanız value='newValue've text='newLabel'şu kodu eklemelisiniz:

1. Şuraya yeni Seçenek ekle <select>:

   var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
   $(selLocationID).html(opt);

2. <select>Seçili değere geçişi tetikle :

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

Sadece ikinci bir cevap eklemek istedim. Seçimi daha önce bir select2 olarak oluşturduysanız , bunu seçicinize aşağıdaki gibi yansıtmanız gerekir:

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

İki seçeneğiniz var - @PanPipes yanıt durumları olarak aşağıdakileri yapabilirsiniz.

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

Bu, yalnızca değişiklik etkinliğine bağlanmış özel bir işlem yoksa kabul edilebilir bir çözümdür. Bu durumda kullandığım çözüm, görüntülenen select2 seçimini güncelleyen select2'ye özgü bir olayı tetiklemektir.

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

Bir select2'de bir String seçeneği belirlendiğinde bazı sorunlar yaşıyorsanız:

Şu seçenekle: "seçenek string1 / seçenek" kullanılır:

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

AMA bir değer içeren bir seçenek: seçenek değeri "E" string1 / option:

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

Bu, aynı sorunla mücadele eden birine yardım etmeyi umuyor.

tek bir değer seçmek istiyorsanız şunu kullanın: $('#select').val(1).change()

birden fazla değer seçmek istiyorsanız, bu kodu kullanabilmeniz için dizideki değeri ayarlayın $('#select').val([1,2,3]).change()

V4 Select2 için hem select2'nin değerini hem de açılır menünün metin temsilini değiştirmek istiyorsanız.

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

Bu, yalnızca perde arkasındaki değeri değil, select2 için metin ekranını da ayarlar.

Çıkarılmış https://select2.github.io/announcements-4.0.html#removed-methods

Beklediğim kod:

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

mükemmel çalışıyor yararlı olan için @PanPipes teşekkür ederiz.

Bunu yap

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

ajax veri kaynağınız varsa lütfen hatalar için bu makaleye bakın

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

// Select2 kontrolünü ayarlama

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

// Önceden seçilen öğeyi getir ve kontrole ekle

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

açılır listeden metni bildiğinizde ve değeri bilmediğinizde seçilen bir öğeyi ayarlamak istiyorsanız, işte size bir örnek:

Diyelim ki bir saat dilimi anladınız ve ayarlamak istiyorsunuz, ama değerler time_zone_idbunlarda var.

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

Yazı tipi: 2 doküman seçin

sadece değeri ayarlamak için get / set yöntemini kullanabilirsiniz

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

ya da bunu yapabilirsiniz:

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