update the unselectable value (jquery)

Question

i'm using selectable jquery, i want to cater the value for selectable once the use select or unselect the item. My problem is, the last value of unselectable won't update. Full code here http://jsfiddle.net/duQH6/ When I select Mon and Tue, then I unselect the Tue, the value is updated, but then when I click Mon, the value is not updated. Please advice.

Here my jquery code

$(function() {
$("#selectday1").bind('mousedown', function (e) {
        e.metaKey = true;
}).selectable();
}); 

$('document').ready(function(){ 
$( "#selectday1" ).selectable({
    selected: function(event, ui) {
        var result=[];
        jQuery(".ui-selected", this).each(function() 
        {
        result.push(this.id);
        $("#days").val(result.join(','))
        });
    }
});
$( "#selectday1" ).selectable({
    unselected: function(event, ui) {
        var result=[];
        jQuery(".ui-selected", this).each(function() 
        {
        result.push(this.id);
        $("#days").val(result.join(','))
        });
    }
});
}); 

Thanks..

Answer 1

The problem is, you are updating the days value within the each loop, so when you unselect the last element the loop callback is never executed, that is why it is happening.

The days value is supposed to be updated once the each() loop is completed.

$(document).ready(function () {
    $("#selectday1").selectable({
        selected: function (event, ui) {
            var result = [];
            jQuery(".ui-selected", this).each(function () {
                result.push(this.id);
            });
            $("#days").val(result.join(','))
        },
        unselected: function (event, ui) {
            var result = [];
            jQuery(".ui-selected", this).each(function () {
                result.push(this.id);
            });
            $("#days").val(result.join(','))
        }
    });
});

Demo: Fiddle

But it can be simplified to

jQuery(function ($) {
    function serialize(event, ui) {
        var result = $(this).find(".ui-selected").map(function () {
            return this.id;
        }).get();
        $("#days").val(result.join(','))
    }

    $("#selectday1").selectable({
        selected: serialize,
        unselected: serialize
    });
});

Demo: Fiddle