web-dev-qa-db-ja.com

JqG​​ridでselect2ドロップダウンの選択値を変更する方法

Olegの select2 demo を使用していますが、ドロップダウンメニューで現在選択されている値を変更することが可能かどうか疑問に思います。

たとえば、ロードされた4つの値が"Any", "Fruit", "Vegetable", "Meat"およびドロップダウンリストのデフォルトが"Any"である場合、JqGridイベントloadCompleteでそれを"Fruit"に変更するにはどうすればよいでしょうか。

これは可能ですか？

jqueryjqgridui-select2
169
Adam K Dean

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

他の解決策ではうまくいかないかもしれませんが、次の例でうまくいくはずです。

解決策1：select2を含む、添付されているすべての変更イベントを発生させる

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

解決策2：JUST select2のchangeイベントが発生するようにする

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

これらの例については jsfiddle を参照してください。解決策2の@minlareに感謝します。

説明：

親友に人の名前を付けてもらったとしましょう。したがって、Bob、Bill、およびJohn（この例では、Valueは名前と同じであると想定しています）。最初に私の選択でselect2を初期化します：

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

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

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

あるいは、システムにリスト内でBobの代わりに次のものを選択させるとします。

// 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');
379
PanPipes

select2ドキュメントを見て あなたは値を取得/設定するために以下を使用します。

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

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

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

そのため、jqGridのloadComplete内で、探している値を取得してからselectboxの値を設定できます。

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

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

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

これは助けになるはずです。

31
Yasser

これはもっと簡単なはずです。

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

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

18
Neelu

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

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

新しいvalue='newValue'とtext='newLabel'を追加したい場合は、次のコードを追加してください。

  1. <select>に新しいOptionを追加します。

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

  2. <select>を選択した値に変更します。

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

あなたには2つの選択肢があります - @PanPipesが答えるように、あなたは以下をすることができます。

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

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

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

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

"option string1/option"を使用した場合

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

ただし、次の値を持つオプションがあります。option value "E" string1/option：

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

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

9
Aldodzb

単一の値を選択したい場合は$('#select').val(1).change()を使用してください。

あなたが複数の値を選択したいならば、あなたはこのコードを使うことができるように配列に値を設定します$('#select').val([1,2,3]).change()

6
Utkarsh Pandey

V4 Select2の場合、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 から取得

5
Rmalmoe

私の予想コード：

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

便利な機能を提供してくれた@PanPipesに感謝します。

4
Abdullah Sheik Davood

あなたが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
        }
    });
});
2
user3444748

これを行う

 $('select#id').val(selectYear).select2();
2
Jaskaran singh Rajal

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

タイムゾーンを考え出して設定したいとしますが、値には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');
1
Yevgeniy Afanasyev

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
0
Foram Thakral
// 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つのドキュメントを選択

0
CodeNoob