Get last selected value of multiple select element

I have a number of select boxes that have been set to accept multiple values. Is there anyway that I can use jQuery to get the last selected value? I've tried using the following:

var latest_value = $("option:selected",this).val();

and it returned nothing. I only want the last selected value and not the array of values.

Thank you in advance

As requested here's the HTML I've cut the list down as it's too long:

<select id="style-list" name="style-list[]" class="attrs" multiple="multiple">
    <option value="7">2 Pack</option>
    <option value="10">3 Pack</option>
    <option value="12">4 Pack</option>
</select>

Then at the top of the page I have the following (I have 8 of these, but I've shown a few so that you can see that I'm using multiple instances of the multiselect widget:

$(document).ready(function(){

    $("#product-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Product",
       minWidth: 190  
    }).multiselectfilter();

    $("#style-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Style",
       minWidth: 190  
    }).multiselectfilter();


    $("#feature-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Features",
       minWidth: 190  
    }).multiselectfilter();

});

and then I have this in a seperate js file:

$(function(){

    $(".attrs").on("multiselectclick", function(event, ui){

    var latest_value = $('option', this).filter(':selected:last').val(); 
    alert (latest_value);

    var view = $("#currentview").val();
    var page = 1;

    run_ajax(view,page);

    });

})

Thank you


Use the :last selector:

var latest_value = $("option:selected:last",this).val();

It may be that this in the context of the callback function doesn't refer to the <select> element itself, but instead to an element within it, so try the following:

var latest_value = 
$(this).closest('select').find('option').filter(':selected:last').val();

It may also be worth calling console.log(this); inside the callback function, just so you know what element you're actually working with.


Use the last function: like this

$("#style-list option:selected").last().val()

Here is the code to get the latest selected option from multiple select list using Jquery :

var selected;
$(document).ready(function() {
$('#SELECT_ID').on('click', function() {
var latestSelected;
if (selected) {
    var currentOptionsValue = $(this).val();
    latestSelected = currentOptionsValue.filter(function(element) {
    return selected.indexOf(element) < 0;
  });
}
selected = $(this).val();
console.log( "latest selected option : " + latestSelected);
});
});