CODEWITHSUNDEEP
jqueryjquery-select2
Alex Angelico
Alex Angelico

Reputation: 4035

Jquery Select2, how to access ajax data at on(change) function?

I'm using Select2 with ajax. Everything works fine, when the user click on the item they want, I use the on(change) function as specified by the documentation for doing some stuff. 

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

});

The return value (e.val) is the data.id value from the ajax call, but my data object has "name", "id" and "type".

I can add code to dataFormatSelection() but this doesn't sound logic and is confusing.

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

How can I access the whole data object (instead of just data.id) at the on("change".. event?

Upvotes: 9

Views: 28831

Answers (3)

PX10
PX10

Reputation: 63

I have doubt... How I can take the values showing in the console log and use it?

it's correct if i take these values and put each one into a var? Because if I use console.log(var) for any var created the value is displayed but if a do an alert(var) the alert is never shown.

I need to take the value of the option selected to call with AJAX a PHP function.

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

Thanks!!!

Upvotes: 0

WebPal
WebPal

Reputation: 656

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

Upvotes: 21

Primoz Rome
Primoz Rome

Reputation: 11031

According to Select2 docs change event should have 3 properties: The event object contains the following custom properties:

  • val: the current selection (taking into account the result of the change) - id or array of ids
  • added: the added element, if any - the full element object, not just the id
  • removed: the removed element, if any - the full element object, not just the id

There is even example:

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

But I noticed that added and removed properties are only present when multiple: true is on. I don't know if this is by design or is it bug. I am going to report it anyway, because having the selected element available on change is definitely something needed.

Upvotes: 2

Related Questions