Get Unselected Option From Multiple Select List

I have a multiple select list. When user unselects the selected option, I want to know the value of the unselected option made by user. How do I capture it? My sample code is as

Solution 1:

Mouse events aren't available cross browser

My suggestion would be always store array of previous values on the select.

On every change you can then compare to prior value array and once found update the stored array

$('#myselect').on('change', function() {
  var $sel = $(this),
    val = $(this).val(),
    $opts = $sel.children(),
    prevUnselected = $sel.data('unselected');
  // create array of currently unselected var currUnselected = $opts.not(':selected').map(function() {
    returnthis.value
  }).get();
  // see if previous data storedif (prevUnselected) {
      // create array of removed values        var unselected = currUnselected.reduce(function(a, curr) {
        if ($.inArray(curr, prevUnselected) == -1) {
          a.push(curr)
        }
        return a
      }, []);
      // "unselected" is an arrayif(unselected.length){
        alert('Unselected is ' + unselected.join(', '));  
      }

  }
  $sel.data('unselected', currUnselected)
}).change();

DEMO

Solution 2:

Great question, i wrote some codes for detecting unselected options using data attributes.

$('#select').on('change', function() {  
    var selected = $(this).find('option:selected');
    var unselected = $(this).find('option:not(:selected)');
    selected.attr('data-selected', '1');
    $.each(unselected, function(index, value){
    	if($(this).attr('data-selected') == '1'){
      	    //this option was selected beforealert("I was selected before " + $(this).val());
            $(this).attr('data-selected', '0');
        }
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectmultipleid="select"><optiondata-selected=0value="volvo">Volvo</option><optiondata-selected=0value="saab">Saab</option><optiondata-selected=0value="opel">Opel</option><optiondata-selected=0value="audi">Audi</option></select>

Solution 3:

If I understand you correctly, you want the option that just got unselected, right?

if so, try this:

create a variable "lastSelectedValue" (or whatever you want to call it). When you select an option, assign to it, when you change the selected option, you can get the value and use it, and assign to it again

var lastSelectedOption = '';
$('select').on('change', function(){ 
   //do what you need to do
   lastSelectedOption = this.val();
});

here's a fiddle: https://jsfiddle.net/ahmadabdul3/xja61kyx/

updated with multiple: https://jsfiddle.net/ahmadabdul3/xja61kyx/

not sure if this is exactly what you need. please provide feedback

Solution 4:

As mentioned by others, the key would be to compare the previous selected values with current value. Since you need to figure out the removed value, you can check if the lastSelected.length > currentSelected.length and then simply replace the currentSelected from the lastSelected to get the results.

var lastSelected = "";
$('select').on('change', function() {
    var currentSelected = $(this).val();  
    if (lastSelected.length > currentSelected.length) {
       var a = lastSelected.toString().replace(currentSelected.toString(),"");
        alert("Removed value : " + a.replace(",",""));
     }     
      lastSelected = currentSelected;
});

Working example : https://jsfiddle.net/DinoMyte/cw96h622/3/

Solution 5:

You can try make it

$('#link_to_id').find('option').not(':selected').each(function(k,v){
    console.log(k,v.text, v.value);
});

With v.text get the Text

With v.value get the Value