Multi Select DropDown- Get current selected option

Question

I have a multi select and i want to find out what option the user clicked on. I have searched online but cant get any decent answer. I dont want an array of all selected option, just the one that the user clicked on

For example

Option A Option B Option C

if member clicks on Option A i want to get option A, if member then selects Option B, i want to get Option B, not Option A and B.

I have seen answers where they say to use the click event, but further research suggest that with multi options the click event does not fire, i must use on change.

The reason why i need this, is because we have the following requirement

Option A Option B Option C Option None

if member selects A, then B, then None, i need all the options to be deselected, and "None" just selected.

if None is selected, and member decides to select Option A, then None needs to be deselected and Option A needs to be selected.

The only way i can see achieving this is to know what option the member has clicked on, if None, then deselect all, then select None, else, make sure none is deselected if selected.

Answer 1

Get the current option selected (dynamic) :

$('#myselect').change(function() {
    alert($(this).val());
})

Get the current option selected (no dynamic) :

$('#myselect option:selected').val();

Answer 2

This took me a little bit of Googling to figure it out as I've never messed with multi-selects before, but here is the code that I came up with that works the way you want. It probably has room for improvement, but I don't have time to do that right now.

var arr = [],
  index;

$("#mymulti").on('click', 'option', function() {
  if ($(this).is(':selected')) {
    arr.push($(this).val());
  } else {
    index = arr.indexOf($(this).val());

    if (index > -1) {
      arr.splice(index, 1);
    }
  }
  if (arr.length == 0) {
    $('#mymulti').val(['None']);
    arr.push('None');
  } else if (arr[0] === 'None' && arr.length > 1) {
    index = arr.indexOf('None');
    arr.splice(index, 1);

    $('#mymulti option[value="None"]').attr('selected', false);
  } else {
    $.each(arr, function(index, value) {
      if (value === 'None' && index > 0) {
        $("#mymulti option").attr('selected', false);
        $('#mymulti option[value="None"]').attr('selected', true);
        arr = ['None'];
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mymulti" multiple="multiple">
  <option value="1">Option A</option>
  <option value="2">Option B</option>
  <option value="3">Option C</option>
  <option value="None">None</option>
</select>

Answer 3

The multi select i was using was silvio moretto's bootstrap-select

for some reason it was supressing the on -click event from firing.

I went to his website, and found the following event

$('#myMulti').on('changed.bs.select', function (evt, clickedIndex) { the second parameter gave me the current selected index, which is what i needed

https://silviomoreto.github.io/bootstrap-select/options/#events

Answer 4

$("#mymulti").on('change', function(e) {
  e.currentTarget.value //should return you the currently selected option
});

Answer 5

let previouslySelected = []; // declare as a global array

$("#your-select-picker-id").change(function () {

    let currentlySelected   = $(this).val(); // ids [1, 2, 3]
    let isAdding            = currentlySelected.length > previouslySelected.length;


    if ( isAdding )
    {
        lastSelectedId = currentlySelected.find( ( element ) => ! previouslySelected.includes(element) )

    }else
    {
        lastSelectedId = previouslySelected.find( ( element ) => ! currentlySelected.includes(element) )

    }

    previouslySelected = currentlySelected;

});