获取触发多个 select onchange 事件的选项的值和状态（selected 或不）

Question

我只想从所选内容中获取值 added/removed，而不是包含所有所选值的数组。

我如何监控每个选项而不是整个选择器来查看哪个选项发生了变化？

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

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

当前解决方案：使用 bootstrap multiselect jquery plugin's onchange option（bootstrap 多选将选择器变成一个列表，因此可以使用其自己的 onchange 事件单独监视每个选项）。有什么 "pluginless" 想法吗？

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

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

获取触发多个 select onchange 事件的选项的值和状态（selected 或不）

get the value and status (selected or not) of the option that triggers a multiple select onchange event

javascript

jquery

html-select

multipleselection