始终触发 <select> 的“更改”事件，即使单击的 select2 选项已被选中答案

【问题标题】：always trigger "change"-event for <select>, even if the select2-option clicked is already selected始终触发 <select> 的“更改”事件，即使单击的 select2 选项已被选中
【发布时间】：2013-05-10 15:59:30
【问题描述】：

我有一个原生的<select>-元素，基于它我正在初始化一个 select2-dropdown-menu。我通过 select2 绑定了一个更改事件，每当更改 select2/select-option 时都会调用该更改事件。但是，即使再次选择了当前选择的选项，我也需要触发事件。

function onSelectChange(){
    alert('changed');
};

$("#select").select2().bind('change', onSelectChange);

我准备了一个http://jsfiddle.net/rb6pH/1/ - 如果当前选择了“阿拉斯加”，然后通过 select2-dropdown 再次选择，onSelectChange() 应该再次触发，触发警报。

我很难表达自己，如果有什么不够清楚，请询问。

【问题讨论】：

我现在不能玩，你能发一个你正在使用的插件的链接吗？
ivaynberg.github.com/select2
你能解释一下你的情况吗？也许还有其他活动可以听。
对不起，这完全没有意义。现在是 2013 年，您不应该再使用透明元素来捕获点击。
我认为你应该问一个关于你试图解决的问题（使用这种复杂的方法）的问题，而不是如何处理你正在尝试的解决方案所产生的问题。此外，请查看'What is the XY problem?'

标签： javascript jquery jquery-select2

【解决方案1】：

受到@FritsvanCampen 绝对有效的评论的启发，我坐下来自己想出了一个方法：我真正需要的是一种访问当前选择的val 的方法，即使它没有改变。通过使用 select2 的未记录的 close-event 而不是 change，我可以像这样访问：

function onSelectChange(event){
    alert( $("#select").select2("val") );
};

$("#select").select2().bind('close', onSelectChange);

在 http://jsfiddle.net/rb6pH/42/ 查找更新的 jsFiddle

【讨论】：

稍作调整后仍然可以工作：select2:close 和 $(this).val()。

【解决方案2】：

here 提出了类似的问题。我根据链接中的代码为您的问题做了一个小提琴。 http://jsfiddle.net/rb6pH/55/

function onSelectChange(){
alert('changed');
};

var select2 = $("#select").select2().data('select2');

select2.onSelect = (function(fn) {
return function(data, options) {
    var target;

    if (options != null) {
        target = $(options.target);
    }

    if (target) {
        onSelectChange();
        return fn.apply(this, arguments);
    }
}
})(select2.onSelect);

【讨论】：

非常感谢丹尼尔，工作就像一个魅力。具有讽刺意味的是，我也问了“类似的问题”：/你看到我刚刚给自己的答案了吗，使用“关闭”事件？您觉得哪种方法更健康？
如果你打开下拉菜单然后点击它外面的关闭事件仍然会触发。如果即使他们没有选择任何内容，您也希望出现警报，那么我认为关闭就可以了。
正是我此刻意识到的（通过摆弄实际的应用程序代码）。再次感谢！
此代码似乎与最新版本的 select2 不兼容 :(.

【解决方案3】：

我想你可能会参考这个链接，我曾经遇到过同样的情况，

使用 Select2 的 val() 方法更改选择时不会触发更改事件。

事件对象包含以下自定义属性：

值

当前选择（考虑到更改的结果）- id 或 id 数组。

已添加

添加的元素，如果有的话 - 完整的元素对象，而不仅仅是 id

已移除

移除的元素，如果有的话 - 完整的元素对象，而不仅仅是 id

更多信息请参考this。

谢谢！

【讨论】：

【解决方案4】：

我阅读了这个问题，它与我的问题非常接近，所以我决定不再发布另一个问题。我想要做的是在 select2 关闭后，一个简单的文本输入成为焦点，但它不起作用。请检查

function onSelectChange(){
    alert('closed');
    $('#hey').focus();
};

$("#select").select2().bind('close', onSelectChange);
$('#hey').on('focusin)', function(){alert('in');}

http://jsfiddle.net/sobhanattar/x49F2/5/

我试图确保输入成为焦点，它显示输入成为焦点，但我不知道为什么它不显示光标

【讨论】：

【解决方案5】：

一个有点老的问题，但上周我花了几个小时寻找解决方案。

我使用的是 Select2 版本：4.0.5。

我的工作解决方案是这个：

$("#exampleId").on("select2:open", function() {
    var checkExist = setInterval(function() {
        var $selectedChoiceInsideSelect2Dropdown = $("li.select2-results__option[id^='select2-" + exampleId + "-result'][aria-selected=true]");
        if ($selectedChoiceInsideSelect2Dropdown.length) {
            $selectedChoiceInsideSelect2Dropdown.on("mouseup", function() {
                $(this).trigger("change");
            });
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

使用区间很重要！

【讨论】：

【解决方案6】：

 var prev_val = $('#select2').val();
 $('#select2').blur( function() {
    if( $(this).val() == prev_val )
       // not changed
    else {
       // changed
       prev_val = $(this).val();
    }
 });

【讨论】：