2013-02-27 5 views
7

Ich verwende Select2 mit Ajax. Alles funktioniert gut, wenn der Benutzer auf das gewünschte Element klickt, verwende ich die Funktion on (ändern) wie in der Dokumentation angegeben, um etwas zu tun.Jquery Select2, Zugriff auf AJAX-Daten bei einer (Change-) Funktion?

$("#e6").on("change", function(e) {   
     $('input#Destination').val(e.val); 
      }); 

}); 

Der Rückgabewert (e.val) ist der data.id Wert aus dem Ajax-Aufruf, aber mein Datenobjekt "Namen", "id" und "Typ" .

Ich kann Code zu DataFormatSelection() hinzufügen, aber das klingt nicht logisch und ist verwirrend.

 function dataFormatSelection(data) { 
    console.log(data.name + "|" data.id + "|" + data.type); 
    return data.name; 
} 

Wie kann ich die ganzen Daten Objekt zugreifen (statt nur data.id) an dem auf ("change" .. Veranstaltung?

Antwort

18
$("#e6").on('change', function(e) { 
    // Access to full data 
    console.log($(this).select2('data')); 
}); 
+3

Können Sie erklären, warum das funktioniert? – ford

+0

wow, das funktioniert ... danke! –

2

Nach Select2 docs Änderungsereignis soll 3 haben Eigenschaften: Das Ereignisobjekt enthält die folgenden benutzerdefinierten Eigenschaften:

  • val: die aktuelle Auswahl (unter Berücksichtigung des Ergebnisses der Änderung) - Id oder ein Array von ids
  • hinzugefügt: das zusätzliche Element, falls vorhanden - das gesamte Element-Objekt, nicht nur die ID
  • entfernt: das entfernte Element, falls vorhanden - das volle Objektelement, nicht nur die ID

Es gibt sogar Beispiel:

$("#e11").select2({ 
    placeholder: "Select value ...", 
    allowClear: true, 
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] 
}); 

$("#e11_2").select2({ 
    placeholder: "Select value ...", 
    multiple: true, 
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] 
}); 

$("#e11").on("change", function(e) { 
    console.log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); 
}).on("open", function() { 
    console.log("open"); 
}); 

$("#e11_2").on("change", function(e) { 
    console.log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); 
}).on("open", function() { 
    console.log("open"); 
}); 

Aber ich bemerkte, dass added und removed Eigenschaften sind nur vorhanden, wenn multiple: true eingeschaltet ist. Ich weiß nicht, ob das von Entwurf oder Fehler ist. Ich werde es trotzdem melden, da das ausgewählte Element bei Änderung verfügbar ist.

0

Ich habe Zweifel ... Wie ich die Werte zeigen, die in dem Konsolenprotokoll nehmen und es verwenden?

es ist richtig, wenn ich diese Werte nehme und jedes in eine Var stelle? Da, wenn ich console.log (var) für eine beliebige Var verwendet erstellt wird der Wert angezeigt wird, aber wenn eine Warnung (var) tun, wird die Warnung nie angezeigt.

Ich muss den Wert der Option wählen, um mit AJAX eine PHP-Funktion aufzurufen.

$("#e11").on('change', function(e) { 
    //I create a var data and works it like an Array 
    var data = $(this).select2('data'); 
    //Then I take the values like if I work with an array 
    var value = data.id; 
    var text = data.text; 
    //If I use console.log(var) the values are displayed but not with an alert 
} 

Vielen Dank !!!

+0

Ich denke, Sie sollten eine neue Frage erstellen, es ist ein anderes Problem –

+0

Ja, es tut mir leid, Sie haben Grund ... Dieser Code funktioniert gut! – PX10

+0

'$ (this) .select2 ('data')' gibt ein Array zurück, also sollten Sie darauf mit 'data [Index] .id' zugreifen – Dementic