Multiselect differences

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<select id="tags" multiple="multiple" name="tags" required></select>

JavaScript

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}
var multi = $("#tags").kendoMultiSelect({
    dataSource: {
        transport: {
            read: function (op) {
                var data = [
                    "Option1", "Option2", "Option3", "Option4", "Option5"
                ];
                op.success(data);
            }
        }
    },
    value     : ["Option2"],
    dataBound : function (e) {
        saveCurrent(this);
    },
    change    : function (e) {
        // Retrieve previous value of `multiselect` saved using previous function
        var previous = this._savedOld;
        // These are current values.
        var current = this.value();
        // Let's save it for the next time
        saveCurrent(this);
        
        // The difference between previous and current are removed elements
        var diff = $(previous).not(current).get();
        alert("removed: " + diff);
        
        // The difference between current and previous, are added elements
        diff = $(current).not(previous).get();
        alert("added: " + diff);
    }
}).data("kendoMultiSelect");