web-dev-qa-db-ja.com

select2動的に変化するアイテム

リンクされた2つの選択があります。最初の選択の各値は、2番目の選択で表示されるアイテムを決定します。

2番目の選択の値は、2次元配列に格納されます。

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
  [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
  ...
]

最初の選択値は、2番目の選択を設定するために使用されるインデックスを決定します。したがって、最初の「変更」イベントでは、select-twoに含まれる項目を変更できるはずです。

ドキュメントを読む「データ」オプションを使用する必要があると思いますが、初期化時にサンプルが配列データをロードする方法を教えてください。初期化後に同じことをしようとするとうまくいかないようです。

HTML

Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<select name="value" id="value"></select>

<script>
   var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
              ];
   $('#attribute').select2().bind('change', function(){
      // Here I need to change `#value` items.
      $('#value').select2('data',data[$(this).val()]);  // This does not work
   );

   $('#value').select2();
</script>
javascriptjquery-select2
62
Raúl Ferràs

これを行う方法を示す例を作成しました。

Jsだけでなく、＃valueを入力要素に変更したことにも注意してください。

<input id="value" type="hidden" style="width:300px"/>

そして、初期値を取得するためにchangeイベントをトリガーしていること

$('#attribute').select2().on('change', function() {
    $('#value').select2({data:data[$(this).val()]});
}).trigger('change');

コード例

編集：

Select2の現在のバージョンでは、クラス属性は非表示の入力からselect2によって作成されたルート要素に転送されます。これは、要素をページ制限の外に配置するselect2-offscreenクラスです。

この問題を解決するには、select [2]を同じ要素に2回適用する前にremoveClass('select2-offscreen')を追加するだけです。

$('#attribute').select2().on('change', function() {
    $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

この問題に対処するために、新しいコード例を追加しました。

62
iMoses

次を使用してオプションを動的に更新することに成功しています。

$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});

23
akaspick

このためにトリガープロパティを使用してみてください。

$('select').select2().trigger('change');
10
Fischer Tirado

V4の場合、これは4.0では解決されない既知の問題ですが、回避策があります。チェック https://github.com/select2/select2/issues/28

4
FranBran

ここに例のライブラリの不足を修正します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

http://jsfiddle.net/bbAU9/328/

4
phanhongphucit

私のプロジェクトでは、次のコードを使用します。

$('#attribute').select2();
$('#attribute').bind('change', function(){
    var $options = $();
    for (var i in data) {
        $options = $options.add(
            $('<option>').attr('value', data[i].id).html(data[i].text)
        );
    }
    $('#value').html($options).trigger('change');
});

Select2部分をコメント化してみてください。残りのコードは引き続き機能します。

2
Michal Lohniský