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);
});
});