2013-02-27 9 views
7

Używam Select2 z ajaxem. Wszystko działa poprawnie, gdy użytkownik kliknie na element, który chce, używam funkcji on (change), jak określono w dokumentacji do robienia pewnych rzeczy.Jquery Select2, jak uzyskać dostęp do danych ajax w funkcji on (change)?

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

}); 

Wartość zwracana (e.val) jest data.id wartość od wywołania AJAX, ale mój obiekt danych ma "nazwę", "id" i "typ" .

Mogę dodać kod do dataFormatSelection(), ale to nie brzmi logicznie i jest mylące.

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

Jak mogę uzyskać dostęp Cały dane obiektu (zamiast tylko data.id) w sprawie ("zmiany" .. wydarzenie?

Odpowiedz

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

Czy możesz wyjaśnić, dlaczego to działa? – ford

+0

Wow, to działa ... dzięki! –

2

Według Select2 docs przypadku zmiana powinna mieć 3 właściwości: przedmiotem zdarzenia zawiera następujące właściwości niestandardowych:

  • Val: bieżącej pozycji (biorąc pod uwagę wynik zmiana) - ID lub tablicę identyfikatorów
  • Dodano: dodatkowy element, o ile w ogóle - pełnego elementu obiektu, a nie tylko identyfikator
  • usunięte: element usunięty, jeśli w ogóle - pełnego elementu obiekt nie tylko identyfikator

Jest nawet Przykład:

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

Ale zauważyłem, że added i removed właściwości są obecne tylko gdy multiple: true jest włączony. Nie wiem, czy jest to zgodne z projektem, czy jest to błąd. I tak mam to zgłosić, ponieważ posiadanie wybranego elementu na zmianę jest zdecydowanie czymś potrzebnym.

0

mam wątpliwości ... Jak mogę przyjmować wartości pokazano w dzienniku konsoli i go używać?

To jest poprawne, jeśli biorę te wartości i umieszczam każdą z nich w var? Ponieważ jeśli użyję console.log (var) dla każdego utworzonego var, wyświetlona zostanie wartość, ale jeśli zrobi się alert (var), alert nie zostanie nigdy wyświetlony.

Potrzebuję pobrać wartość wybranej opcji, aby wywołać z AJAX funkcję PHP.

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

Dzięki!

+0

Myślę, że powinieneś stworzyć nowe pytanie, to inny problem. –

+0

Tak, przykro mi, masz powód ... Ten kod działa dobrze! – PX10

+0

'$ (this) .select2 ('data')' zwróci tablicę, więc powinieneś uzyskać do niej dostęp przez 'dane [Index] .id' – Dementic

Powiązane problemy