72

リンクされている2つの選択があります。最初の選択の各値によって、2番目の選択で表示される項目が決まります。

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

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

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

ドキュメントを読む私は「データ」オプションを使用する必要があると思います...しかし、例が初期化時に配列データをロードする方法を理解しておらず、初期化後に同じことを行おうとすると機能しないようです。

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>
4

6 に答える 6

67

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

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ます。要素をページ制限の外側に配置するクラスも同様です。

この問題を修正するために必要なのはremoveClass('select2-offscreen')、同じ要素にselect2をもう一度適用する前に追加することだけです。

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

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

于 2012-11-07T12:19:14.007 に答える
35

オプションを動的に更新するために、以下を正常に使用しています。

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

于 2016-06-30T16:21:25.870 に答える
11

これにはtriggerプロパティを使用してみてください。

$('select').select2().trigger('change');
于 2015-04-27T01:14:42.413 に答える
7

ここで例のライブラリの欠如を修正します：

<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/

于 2015-03-18T02:59:01.327 に答える
4

v4の場合、これは4.0では対処されない既知の問題ですが、回避策があります。https://github.com/select2/select2/issues/2830を確認してください

于 2015-06-22T07:31:10.587 に答える
4

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

$('#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の部分をコメントアウトしてみてください。残りのコードは引き続き機能します。

于 2015-08-24T08:51:44.657 に答える