2013-02-10 20 views
9

Select2プラグインを使用して、相互に依存する4つのドロップダウンリストを作成しようとしています。Select2 Dependentドロップダウンリスト

私の目標は、新しいデータをajax経由で読み込むことですが、クライアントにいったん設定すると、新しいデータを追加することができなくなります。選択リスト

私が試してみましたコードはここにある:

$(#"a3").select2({ 
    placeholder: "select an item", 
    allowClear: true}).on("change", 
    function (e) { 
     var results = $.get("url?id=2", 
      function (data, textStatus, jqXHR) { 
       $(this).select2({ data: { results: data, text: "Name" } }); 
     }); 
    } 
); 

あり、ここで select2 changing items dynamically 別の質問があるが、そこに解決策を選択2 V3.2で働いていたではなく、SelectセレクトV3.3

答えて

8

イゴールはこの

を行うための方法で私に戻って来ています
var data=[...];  
$().select2({data: function() {return {results:data};}});  
/// later  
data=[...something else];  
// next query select2 will use 'something else' data 
+1

恐ろしく、私はこれを探していました。 'select2({...}) 'を何度も呼び出すと(ノックアウトのため)、私はいくつかのブラウザで大量のメモリリークを引き起こしていました。あなたが書いたことにちょっと注意してください:データを返そうとすると、Select2はエラーを投げます。データが 'results'インデックスにあるオブジェクトを返す必要があります。したがって: 'return {results:data}' – treeface

+1

コードの完全な例を投稿してください。私はまた、select2で従属ドロップダウンを取得する必要があります –

+0

これは私にとっては機能しません、コールバックは決して呼び出されません(Select2 v4) –

4

正しいフォーマット次のとおりです。

.select2("data", {...}) 
+0

Igorさん、ありがとうございました。そのメソッドを使用すると、渡されたデータに基づいてドロップダウンリスト内のアイテムを選択しようとしていたことがわかりました。 –

2

Select2 v4.xでは、ここでは小さいjs classです。

これを使用すると、select2リストボックスのオプションは、別のselect2リストボックスの選択に基づいてajaxによってロード/リフレッシュされます。依存関係は連鎖できます。例えば

-

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''}); 
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''}); 

codepenにデモを確認してください。また、こちらはhow to useの投稿です。

+0

デモが動作していません。 –

関連する問題