How to get the last selected option from a multiselect?

Question

I\'m looking for a way to get the last user-selected option in a multiselect form using jQuery.

I\'m not looking for the last item on the list, but for the last item

Answer 1

Basically you need to maintain a stack, to keep track of the last selected item. 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 onChange implementation:

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 might as well show you my complete 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 the hookup of the multi-select:

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

You can re-use some of my code to create your own 'lastSelected' implementation.