JqG​​ridでselect2ドロップダウンの選択した値を変更するにはどうすればよいですか？

私はOlegのselect2デモを使用していますが、ドロップダウンメニューで現在選択されている値を変更できるかどうか疑問に思っています。

たとえば、読み込まれた4つの値が次のとおりで"Any", "Fruit", "Vegetable", "Meat"あり、ドロップダウンリストのデフォルトが"Any"である"Fruit"場合、JqGridイベントでこれをどのように変更できloadCompleteますか？

これは可能ですか？

select2バージョン> = 4.0.0の場合

他のソリューションは機能しない可能性がありますが、次の例は機能するはずです。

解決策1：select2を含むすべてのアタッチされた変更イベントをトリガーします

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

解決策2：JUST select2 changeイベントをトリガーさせる

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

これらの例については、このjsfiddleを参照してください。ソリューション2について@minlareに感謝します。

説明：

親友に人の名前を選んでもらいましょう。したがって、ボブ、ビル、ジョン（この例では、値が名前と同じであると想定しています）。まず、select2をselect2で初期化します。

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

ブラウザで手動でボブを選択します。次のボブはいたずらなことをしていて、私はもう彼を好きではありません。したがって、システムはボブの選択を解除します。

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

または、システムにボブの代わりにリストの次を選択させると言います：

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

他のユーザーに役立つ可能性があるSelect 2 Webサイトに関する注意事項（非推奨および削除されたメソッドを参照）：

.select2（ 'val'） 「val」メソッドは廃止され、Select2 4.1で削除されます。非推奨のメソッドには、triggerChangeパラメータが含まれなくなりました。

代わりに、基になる要素の.valを直接呼び出す必要があります。2番目のパラメーター（triggerChange）が必要な場合は、要素で.trigger（ "change"）も呼び出す必要があります。

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

以下を使用して値を取得/設定するselect2ドキュメントを見てください。

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

@PanPipesは、これが4.xで変更されたことを指摘しました（以下の賛成票を投じてください）。val直接呼び出されるようになりました

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

したがってloadComplete、jqGrid 内で、探している値を取得して、selectbox値を設定できます。

ドキュメントからのお知らせ

このメソッドを使用するには、オプションでinitSelection関数を定義する必要があることに注意してください。Select2は、val（）で渡すオブジェクトのIDを、選択をレンダリングするために必要な完全なオブジェクトに変換する方法を認識します。select要素にアタッチする場合、この関数はすでに提供されています。

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

これは役に立ちます。

これはさらに簡単になるはずです。

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

ただし、渡す値がすでにHTMlに存在することを確認してください。

新しいvalue='newValue'とを追加するtext='newLabel'場合は、次のコードを追加する必要があります。

1. に新しいオプションを追加<select>：

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

2. <select>選択した値へのトリガー変更：

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

2番目の答えを追加したかっただけです。selectを既にselect2としてレンダリングしている場合は、次のようにセレクターに反映させる必要があります。

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

2つのオプションがあります。@ PanPipesが答えるように、次のことができます。

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

これは、変更イベントにバインドされたカスタムアクションがない場合にのみ許容できるソリューションです。この状況で使用する解決策は、select2に表示された選択を更新するselect2固有のイベントをトリガーすることです。

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

select2で選択された文字列オプションの設定に問題があります。

オプション： "option string1 / option"を使用した場合：

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

しかし、値を持つオプション：オプション値 "E" string1 / option：

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

これが同じ問題に苦しんでいる誰かを助けることを願っています。

単一の値を選択したい場合は、 $('#select').val(1).change()

複数の値を選択する場合は、配列に値を設定して、このコードを使用できるようにします $('#select').val([1,2,3]).change()

select2の値とドロップダウンのテキスト表現の両方を変更する場合は、V4 Select2の場合。

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

これにより、舞台裏の値だけでなく、select2のテキスト表示も設定されます。

https://select2.github.io/announcements-4.0.html#removed-methodsから取得

私の予想されるコード：

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

@PanPipesの便利な機能に感謝します。

これを行う

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

あなたがajaxデータソースを持っているなら、無料のバグのためにこれを参照してください

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

// Select2コントロールを設定します

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

//事前選択されたアイテムを取得して、コントロールに追加します

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

ドロップダウンリストからのテキストがわかっていて、値がわからないときに選択した項目を設定する場合の例を次に示します。

タイムゾーンを把握して設定したいとしますがtime_zone_id、値はタイムゾーンに含まれています。

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

フォント：2つのドキュメントを選択

get / setメソッドを使用して値を設定するだけです

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

またはこれを行うことができます：

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