jQuery select2 control - retrieve last selected element

Question

I am using jQuery select2 control and I need to implement the following functionality: if the user tries to add a certain element, based on some algorithm, I should delete another (incompatible) element from the selection. I see two ways to achieve that:

1) inhibit automatic sorting of selected values 2) get value of the last selected item and optionally remove the incompatible item from the list

For 1) I could not figure how to inhibit auto sorting (both "data" and "values" are ordered after a selection is performed) For 2) I could not find last selected item information anywhere (I expected to find something in the select event e variable).

My code is the following:

    $("#PhaseFilterSelectedList").select2()
       .on("select2:select", function (e) {
           // removing option inconsistent with last selected item, if any
           var allData = $("#PhaseFilterSelectedList").select2("val");
           if (!allData || allData.length < 2)
               return;

           //alert("Value = " + $("#PhaseFilterSelectedList").select2("val").join(','));
           //alert("Data = " + $("#PhaseFilterSelectedList").select2("data")[0].id + " " + $("#PhaseFilterSelectedList").select2("data")[1].id);

           var lastItemId = allData.slice(-1)[0];
           var lastItemHalf = Math.floor((parseInt(lastItemId) + 1) / 2);
           var toRemove = jQuery.grep(allData, function (elem, index) {
               return elem != lastItemId && Math.floor((parseInt(elem) + 1) / 2) == lastItemHalf;
           });

           if (!toRemove || toRemove.length < 1)
               return;

           allData.splice($.inArray(toRemove[0], allData), 1);
           $("#PhaseFilterSelectedList").select2("val", allData);

       })

Incompatible element removal works fine, but I have trouble with identifying the last selection performed by the user.

Any idea how can I perform this task? Thank you.

Wiltshire

Answer 1

Hey I might be a little late answering this but I found a pretty easy solution to this. You we're right by looking through the event for the last selected item. This worked for me.

var $eventSelect = $('.select_field'); //select your select2 input
$eventSelect.on('select2:unselect', function(e) {
  console.log('unselect');
  console.log(e.params.data.id); //This will give you the id of the unselected attribute
  console.log(e.params.data.text); //This will give you the text of the unselected text
})
$eventSelect.on('select2:select', function(e) {
  console.log('select');
  console.log(e.params.data.id); //This will give you the id of the selected attribute
  console.log(e.params.data.text); //This will give you the text of the selected
})

Lugger

In the mean time I am trying to use Angular only, but the answer is greatly appreciated, since I also have to manage legacy code :) – Wiltshire

Awesome, no problem man. Yeah angular doesn't play nice with jquery plugins haha – Lugger

This should be selected as best answer! – Sanjak

Answer 2

for the second part this may help you:

$(this).val(); // references the select

you can filter it to get all needed values.

A Example is in the fiddle: http://jsfiddle.net/jEADR/1588/

Miranda

Actually what I need is to identity just selected item. E.g from your fiddle: Wyoming is selected, Alabama is selected, control autosorts selection and the last selected item is Wyoming, not Alabama. Since I am using select event, I am expecting to find just selected item somewhere in the event info, but I cannot find the information. Thank you for the prompt answer. – Wiltshire

I have managed to do I needed using an workaround: have an extra array that holds previous selection and compute set difference between current selection and previous selection. However, I would expect to get just selected element more easily. – Wiltshire