获取触发多重select onchange事件的选项的值和状态(已选中或未选中)

Question

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

我如何监控每个单独的选项，而不是整个选择器，看看哪一个已经改变?

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

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

当前的解决方案:使用bootstrap multiselect jquery插件的onchange选项(bootstrap multiselect将选择器变成一个列表，这样每个选项都可以使用自己的onchange事件单独监控)。有没有"无插件"的想法?

Answer 1

我不认为有什么像样的解决办法。使用自己的jQuery插件来抽象状态比较。

也许这个小插件可以在list上触发自定义的optionChange事件，提供两个额外的参数(value, state)可以帮助你:

$.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

如果需要，你可以修改它来触发单个事件和删除的选项列表