Get the last deselected value of a multi select with JQuery

Question

Get the last deselected value of a multi select with JQuery

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have the following multiselect:

<div class="input-field">
     <select name="id_empresa[]" id="select_empresas" multiple required>
          <?php
             $ids = array_column($id_empresa, 'id_empresa');                                    
             foreach ($empresas as $empresa) { 
                 echo '<option value="'.$empresa->id_empresa.'" '.(in_array($empresa->id_empresa, $ids) ? 'selected': '').'>'.$empresa->nombre .'</option>';                                   
                 //echo '<option value="'.$empresa->id_empresa.'" '.((in_array($empresa->id_empresa,$id_empresa->id_empresa))? 'selected': '').'>'.$empresa->nombre.'</option>';
                 //echo '<option value="'.$empresa->id_empresa.'">'.$empresa->nombre.'</option>';
             }
          ?>
     </select>
     <label>Empresas</label>
</div>

And I want to get the value of the last option that was deselected. This is my JQuery code:

$('#select_empresas').on('change',function(e) {
      alert( $(this).val());
});

However, it shows all the results, separated by commas, but only when selecting and if I deselect the last option , it returns null.

Does anyone see what I'm doing wrong?

javascript jquery html php

asked by U.C 06.09.2018 в 05:39

source

3 answers

Uncaught TypeError: Can not read property 'indexOf' of undefined How can I change the text of a TextBox with the space bar? (VFP)

score 1 · Answer 1

If in addition to obtaining all the options selected, you want to obtain the value of the last selected and unselected, you could associate an onclick to the option and that is overwriting the value that has been clicked, in order to have always the last one that was selected or deselected:

    var ultimo_seleccionado = '';
    var ultimo_deseleccionado = '';

    $('#select_empresas option').click(function() {
    if ($(this).is(':selected'))  {
        ultimo_seleccionado = $(this).val();
    }
    else {
        ultimo_deseleccionado = $(this).val();
    }
});

alert(ultimo_seleccionado);
alert(ultimo_deseleccionado);

score 1 · Answer 2

Try this code:

var ultimo = ''; // Valor deseleccionado
var ahora = ''; // Valor seleccionado
$('#select_empresas').change(function(e) {
  ultimo = ahora;
  ahora = $(this).val();
  alert(ultimo);
});

What we do is set a variable ultimo for the newly deselected value, and another variable ahora for the currently selected value. The function .change() is called when a change occurs in the selected option of the select (worth the redundancy). We take advantage of this event to do this: The value of ultimo we do it equal to the value of actual , and the value actual we leave it equal to the value we have just selected.

Maybe at the beginning it does not make much sense, now, the second time we do it, the value we have in ahora we move it to ultimo , and we leave in ahora the current value. So in ultimo , we will always have the previous value.

score 0 · Answer 3

I have corrected your script and instead of pointing to the select we point to the options with the click event, and I have put that conditional so that only the last unmarked is painted.

$('#select_empresas option').on('click',function(e) {
    if($(this).is(':not(:checked)')) {
        alert($(this).val())
    }
});