CODEWITHSUNDEEP
javascriptjquery
Parag
Parag

Reputation: 379

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 below.

<select multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

I have following jquery code to allow user to select multiple options

$('option').mousedown(function(){ 
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false :true);
});

Upvotes: 12

Views: 4860

Answers (5)

Esteban Barrios B&#39;
Esteban Barrios B&#39;

Reputation: 15

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

Upvotes: -1

Vahid Msm
Vahid Msm

Reputation: 1082

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 before
            alert("I was selected before " + $(this).val());
            $(this).attr('data-selected', '0');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="select">
 <option data-selected=0 value="volvo">Volvo</option>
 <option data-selected=0 value="saab">Saab</option>
 <option data-selected=0 value="opel">Opel</option>
 <option data-selected=0 value="audi">Audi</option>
</select>

Upvotes: 3

charlietfl
charlietfl

Reputation: 171690

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() {
    return this.value
  }).get();
  // see if previous data stored
  if (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 array
      if(unselected.length){
        alert('Unselected is ' + unselected.join(', '));  
      }

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

DEMO

Upvotes: 3

DinoMyte
DinoMyte

Reputation: 8868

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/

Upvotes: -1

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

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

Upvotes: -1

Related Questions