How to get the last selected option from the multi selector?

Question

I am looking for a way to get the last user selected parameter in the form of a multi selector using jQuery.

I am not looking for the last item in the list, but for the last item that the user clicked.

Answer 1

Something like that

var lastSelected = null; $('.multiSelectOptions').click(function(){ lastSelected = this.value; }); 

Answer 2

Using this.value , as in the answer above, fails when the user has Ctrl + click and several items selected - it returns the value of the first selection in the list, even if it is not the last click. Try the following:

 var previouslySelected = []; $("#myMultiselect").change (function() { // Get newly selected elements var currentlySelected = $(this).val(); var newSelections = currentlySelected.filter(function (element) { return previouslySelected.indexOf(element) == -1; }); previouslySelected = currentlySelected; if (newSelections.length) { // If there are multiple new selections, we'll take the last in the list var lastSelected = newSelections.reverse()[0]; } }); 

Answer 3

Basically you need to maintain a stack to keep track of the last item selected. I wrote this function to update my stack.

 var determineLastSelectedReportNumber = function (selectedReportNumbers, oldSelectedReportNumbers) { var newlyAddedReportNumbers = selectedReportNumbers.filter(function (n) { return oldSelectedReportNumbers.indexOf(n) == -1; }); var removedReportNumbers = oldSelectedReportNumbers.filter(function (n) { return selectedNumberArray.indexOf(n) == -1; }); //Remove the removed reportNumbers from the stack. if (removedReportNumbers.length > 0) { removedReportNumbers.forEach(function (removedReportNumber) { for (var i = 0; i < selectedNumbersStack.length; i++) { if (selectedNumbersStack[i].toString() === removedReportNumber.toString()) { selectedNumbersStack.splice(i, 1); break; } } }); } //Add the added reportnumbers to the stack. Push(); if (newlyAddedReportNumbers.length > 0) { selectedNumbersStack.push(newlyAddedReportNumbers); } //Set the last selected from top of the stack. Peek(); var lastSelectedReportNumber = ""; if(selectedNumbersStack.length > 0){ lastSelectedReportNumber = selectedNumbersStack[selectedNumbersStack.length -1]; } return lastSelectedReportNumber; } 

And this is my implementation of onChange:

 var reportNumberChanged = function () { var $reportNumber = $(this); var selectedNumber = $reportNumber.val(); oldSelectedNumberArray = selectedNumberArray; selectedNumberArray = jQuery.makeArray(selectedNumber); var lastSelectedReportNumber = determineLastSelectedReportNumber(selectedNumberArray, oldSelectedNumberArray); $("#TheLastSelectedReportNumber").val(lastSelectedReportNumber); resetDelayRetrieveReportInfo(); } 

I could also show you my full code:

 var selectedNumberArray = jQuery.makeArray($('#SelectedReportNumbers').val()); //Initial selectedNumbersStack. var selectedNumbersStack = selectedNumberArray; var counterInitialValue = 3; var counter = counterInitialValue; var counterInterval = -1; function delayRetrieveReportInfo() { counter--; if (counter === 0) { retrieveReportInfo($("#TheLastSelectedReportNumber").val()); clearInterval(counterInterval); } } function resetDelayRetrieveReportInfo() { clearInterval(counterInterval); //The previous interval is cancelled. counter = counterInitialValue; counterInterval = setInterval(function () { delayRetrieveReportInfo() }, 1000); } 

And this is a multi-select connection:

 // Hookup function to change events of select lists $('#SelectedReportNumbers').change(reportNumberChanged); 

You can reuse some code to create your own lastSelected implementation.