2013-02-10 5 views
9

Ich versuche, das Select2-Plugin zu verwenden, um 4 Dropdown-Listen zu haben, die voneinander abhängen. Ich hatte Mühe, den richtigen Weg zu finden, um die Daten zu aktualisieren, die die Optionen laden.Select2 Abhängige Dropdown-Listen

Mein Ziel ist es, die neuen Daten über Ajax zu laden, aber sobald ich es im Client habe, kann ich die neuen Daten nicht hinzufügen die Auswahlliste.

Der Code, den ich versucht habe, ist hier:

$(#"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" } }); 
     }); 
    } 
); 

Hier gibt es eine andere Frage select2 changing items dynamically aber die Lösung dort mit Select2 v3.2 gearbeitet, aber nicht Select2 v3.3

Antwort

8

Igor zurück zu mir mit einer Art und Weise hat sich diese

zu tun
var data=[...];  
$().select2({data: function() {return {results:data};}});  
/// later  
data=[...something else];  
// next query select2 will use 'something else' data 
+1

Ehrfürchtig, ich habe nach diesem gesucht. Der Aufruf von 'select2 ({...})' immer wieder (weil Knockout) verursachte in einigen Browsern massive Speicherlecks. Nur ein Vorbehalt zu dem, was Sie geschrieben haben: Select2 wird einen Fehler ausgeben, wenn Sie versuchen, die Daten einfach zurückzugeben. Sie müssen ein Objekt zurückgeben, in dem sich die Daten im Index 'results' befinden. Also: 'return {results: data}' – treeface

+1

Könnten Sie bitte ein vollständiges Beispiel Ihres Codes posten? Ich muss auch abhängig Dropdown-Arbeit mit select2 –

+0

bekommen Dies funktioniert nicht für mich, der Rückruf wird nie aufgerufen (Select2 v4) –

4

Das richtige Format ist:

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

Dank Igor, ich fand, dass mit dieser Methode versucht, ein Element in der Dropdown-Liste basierend auf den Daten, die ich übergeben, zu wählen. –

2

Für Select2 v4.x, hier ist eine kleine js class.

Mit dieser Option werden Optionen eines Auswahllistenfelds von Ajax basierend auf der Auswahl eines anderen Auswahllistenfelds geladen/aktualisiert. Und die Abhängigkeit kann verkettet werden.

Zum Beispiel -

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

Schauen Sie sich die Demo auf codepen. Auch hier ist ein Beitrag auf how to use es.

+0

Die Demo funktioniert nicht. –