web-dev-qa-db-ja.com

select2：AJAXを使用した複数選択のデフォルト選択

素晴らしい select2 を使用して、複数選択コンボを作成しています。

プログラムでデフォルト値を選択したい（ユーザーが以前に行った選択のように）が、方法がわからない。 initSelectionを使用するとうまくいくことを読みましたが、これはコンボの作成時に呼び出され、このデフォルトの選択が常に行われることは望ましくありません。

jqueryjquery-select2
20
Gabriel Sanmartin

例によるバージョン4.xの正しいソリューション：

$('#element').val(['val1','val2']).trigger('change');

参照： クリエイターの説明

16
Ramin Firooz

私はいくつかの解決策を見つけましたが、多分それはあなたを助けるでしょう：

$('#el').select2({...}) // init select2

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];

$('#el').data().select2.updateSelection(defaultData);
6
sanj

ドキュメンテーション here で概説されているように、選択マークアップに「オプション」を追加するだけで、初期デフォルト値を事前に選択できます。

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>
3
Thomas Clowes

ドキュメントページから：

「val-選択を取得または設定します。値パラメーターが指定されていない場合、現在選択されている要素のid属性が返されます。値パラメーターが指定された場合、現在の選択になります。」

また、ドキュメントから：

$("#e8").select2("val", "CA");
3
user504674

$('#el').select2().val(['val1','val2']).trigger("change")

トリックを行いますが、何らかの理由で独自のタグを追加する機能を削除します...

2
sebap

値の配列をループし、次に一致する各オプションを設定します（ "selected"、true）

values = [2, 5, 3]

for val in values
  $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

Ajax呼び出しから取得した結果を使用することもできます。

1
longJOURNEY

ついに考え出した!! Select2は、<option>の下の<select>タグを反復処理します。

<select class="js-data-example-ajax" style="width:100%">
  <option value="3620194" selected="selected">Put the pre-selected options here</option>
</select>

<option>の内部htmlは、テキストキーの下のリポジトリオブジェクトに配置されます。したがって、repo.textはinnerhtmlを提供します。つまり、initのformatSelectionオプションにrepo.textを指定するだけです。また、サーブレット（コントローラー）から渡されるjsonには、textキーの下に目的のラベルテキストを配置する必要があります!!変更されたリストを保存できるように、作成されたli要素に属性を追加する方法を考えています。何か案は？

0
absin

次のコードは正常に機能しますが、select2更新する必要があります

$('#el').data().select2.updateSelection(defaultData);
0
Fayez Barbari

@sanjの回答を拡張します。これは私のプロジェクトで私のために働いているようです。

Via HTML

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1" selected>One</option>
    <option val="2" selected>Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();

結果 - enter image description here

Via Javascript

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1">One</option>
    <option val="2">Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);

結果 - enter image description here

0
Louwki