ottiene l'opzione deselezionata dall'elenco di selezione multipla

Question

Ho una lista di selezione multipla. Quando l'utente deseleziona l'opzione selezionata, desidero conoscere il valore dell'opzione non selezionata fatta dall'utente. Come lo catturo?

Il mio codice di esempio è il seguente.

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

Ho seguente codice jQuery per consentire all'utente di selezionare opzioni multiple

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

Answer 1

Se ho capito bene, si desidera che l'opzione che ha ottenuto appena selezionata, giusto?

se è così, provate questo:

creare una variabile "lastSelectedValue" (o come volete chiamarlo). Quando si seleziona l'opzione, assegnare ad esso, quando si modifica l'opzione selezionata, è possibile ottenere il valore e usarlo, e assegnare ad esso di nuovo

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

ecco un violino: https://jsfiddle.net/ahmadabdul3/xja61kyx/

aggiornato con più : https://jsfiddle.net/ahmadabdul3/xja61kyx/

non sicuro se questo è esattamente quello che ti serve. si prega di fornire un feedback eventi

Answer 2

mouse non sono disponibili cross browser

Il mio suggerimento sarebbe sempre gamma vendite di valori precedenti sul select.

Su ogni cambiamento si può quindi confrontare a matrice valore prima e una volta trovato l'aggiornamento della matrice memorizzata

$('#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

Answer 3

Come detto da altri, la chiave potrebbe essere quella di confrontare il precedenti valori selezionati con valore corrente. Dal momento che è necessario calcolare il valore rimosso, è possibile verificare se lo lastSelected.length > currentSelected.length e quindi semplicemente sostituire il currentSelected dall'ultimo selezionato per ottenere i risultati.

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; 
}); 

esempio di lavoro: https://jsfiddle.net/DinoMyte/cw96h622/3/

Answer 4

Grande questione, ho scritto alcuni codici per rilevare le opzioni non selezionate utilizzando gli attributi di dati.

$('#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){ 
 
    \t if($(this).attr('data-selected') == '1'){ 
 
     \t  //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>

Answer 5

Si può provare rendere

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

Con v.text ottenere il testo

Con v.value ottenere il valore