0

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.

Philosopher
  • 3
  • 1
  • 3
  • Can you provide a code example of what you have tried? – DiddleDot Mar 14 '16 at 16:01
  • This is what the code would look like if i manage to get the current selected option. If None, deselect all and select None, else { deselect None} – Philosopher Mar 14 '16 at 16:11
  • I have checked online the closest i have come is the below code snippet – Philosopher Mar 14 '16 at 16:14
  • $(document).ready(function(){ $("#mymulti").change(function () { var arr = $(this).val(); if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === 'None')) { $(this).val(['None']); } – Philosopher Mar 14 '16 at 16:14
  • else { // If new selection includes empty ('None'), deselect any other active selections $.each(arr, function (index, value) { if (value == 'None') { var noneOnly = []; noneOnly.push('None'); return false; } }); } }); }); – Philosopher Mar 14 '16 at 16:15

5 Answers5

0

Get the current option selected (dynamic) :

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

Get the current option selected (no dynamic) : 

$('#myselect option:selected').val();
Greg
  • 826
  • 5
  • 21
  • Thanks Greg, but I have tried this already, it gives all the options selected in the list, i just want the one i clicked on. – Philosopher Mar 14 '16 at 16:08
  • option A, Option B already selected, i then click on Option C, your answer gives me Option A, Option B and Option C, what i need is Just Option C – Philosopher Mar 14 '16 at 16:09
0

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>
DiddleDot
  • 745
  • 5
  • 16
  • Thanks for the response Diddle, but the click event does not fire, i think for multi option you need to use change i have looked online, and i get the same answer "click for multi options does not work on many browsers – Philosopher Mar 15 '16 at 10:41
  • What browser does it not fire on? I've checked in chrome, safari, and firefox and it worked in all of them. – DiddleDot Mar 15 '16 at 15:12
  • this was strange to me, for some reason the click event was being supressed, i should have mentioned it i was using Silvio Morettos bootstrap multi select. I went to his website and found the relevant event to use to get what i wanted, I post the answer below. – Philosopher Mar 21 '16 at 11:09
0

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

Philosopher
  • 3
  • 1
  • 3
0
$("#mymulti").on('change', function(e) {
  e.currentTarget.value //should return you the currently selected option
});
remonses
  • 402
  • 1
  • 4
  • 17
0
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;

});
Ryan M
  • 18,333
  • 31
  • 67
  • 74
ahmmaad gamal
  • 1
  • 1
  • 1
    You have posted the [same answer multiple times](https://stackoverflow.com/a/72286314/14267427) throughout the site. If you think this question is a duplicate, flag it or leave a reference to the other question in the comments. – Tyler2P May 18 '22 at 15:31