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

Question

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?

Appearance

Answer 1

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

Viewer

By this way, the data are not up-to-date, the selected value is not marked as selected. To get the selected value using ES6, do $input.select2('data').find(item => item.element.selected). Tested with Select 2 v4.0.12 – Unknot

Answer 2

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.

Hodges

Answer 3

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!!!

Mas

I think you should create a new question, it's a different issue – Appearance

$(this).select2('data') will return an array, so you should access it by data[Index].id – Bibliophile