Multiselect Detect Option Selected and Deselected On Change

Question

I want to check the if the changed state of a multiselect is deselect or select.

pseudo-code:

$(document).on('change', '.mySelect', function (event) {
        if(event === 'selected'){
            alert("You have selected this item.");
        } else {
            alert("You have deselected this item.");
        }
});

Something like this doesn't work. How can i check weather the event was a "select" event or a "deselect" event?

EDIT

Here is a jsfiddle DEMO

Answer 1

Try saving the current state of the select element on change:

http://jsfiddle.net/Wexcode/a4mf8akj/5/

function wasDeselected (sel, val) {
  if (!val) {
    return true;      
  }
  return sel && sel.some(function(d) { return val.indexOf(d) == -1; })
}

$(document).on('change', 'select', function (event) {
  var message,
      $select = $(event.target),
      val     = $select.val(),
      sel     = $('select').data('selected');

  // Store the array of selected elements
  $select.data('selected', val);

  // Check the previous and current val
  if ( wasDeselected(sel, val) ) {
    message = "You have deselected this item.";
  } else {
    message = "You have selected this item.";
  }
  alert(message);
});