获取触发多选 onchange 事件的选项的值和状态（选择与否）

Question

我只想获取从选择中添加/删除的值，而不是包含所有选定值的数组。

如何监视每个单独的选项而不是整个选择器以查看哪个选项发生了变化？

我知道我可以比较整个选择器的前一个状态和当前状态，但这意味着保存前一个状态，因为我想要跟踪的不仅仅是一个选择器，而是一个不确定的数量（每条记录一个在从数据库中检索到的记录列表中），我更愿意使用一种更简单的方法来获取最后一个选择/未选择的值（如果有的话）。

我刚刚想到的另一种选择：不是跟踪每个选择器状态，而是使用 onfocus 事件来保存选择器即将被修改的状态（但是，我更喜欢不需要比较的解决方案状态，如果有的话）。

当前解决方案：使用bootstrap multiselect jquery plugin's onchange option（引导多选将选择器变成一个列表，因此可以使用自己的 onchange 事件单独监控每个选项）。任何“无插件”的想法？

Answer 1

我认为不存在一些体面的解决方案。滚动你自己的 jQuery 插件来抽象状态比较。

也许这个在列表中触发自定义optionChange事件的小插件，提供两个额外的参数（值，状态）可以帮助你：

$.fn.trackOptions = function(){
    return this.each(function(){
        var $select = $(this),
            oldItems = $select.val() || [];
        $select.data("oldItems", oldItems)
        .on("change", function(e){
            var oldItems = $select.data("oldItems"),
                newItems = $select.val() || [];
            for(var i=0; i<oldItems.length; ++i) {
                if(newItems.indexOf(oldItems[i]) == -1){
                    $select.trigger("optionChange", [oldItems[i], false]);
                }
            }
            for(i=0; i<newItems.length; ++i){
                if(oldItems.indexOf(newItems[i]) == -1){
                    $select.trigger("optionChange", [newItems[i], true]);
                }
            }
            $select.data("oldItems", newItems);
        });
    });
}

jsFiddle

如果需要，您可以修改它以触发带有已删除选项列表的单个事件。