总是触发“更改” - <select>的事件 - 即使已经选择了单击的select2选项</select>

时间:2013-05-10 15:59:30

标签: javascript jquery jquery-select2

我有一个原生<select> - 元素,我正在初始化一个select2-downdown菜单。 我通过select2绑定了一个change-event,只要select2 / select-option被改变就会被调用。但是,即使再次选择了当前选择的选项,我也需要触发事件。

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

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

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

我很难表达自己,请问一些事情是否不够明确。

6 个答案:

答案 0 :(得分:6)

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

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

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

http://jsfiddle.net/rb6pH/42/

找到更新的jsFiddle

答案 1 :(得分:4)

提出了类似的问题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);

答案 2 :(得分:0)

我想你可能会参考这个链接,我在同样的情况下陷入困境,

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

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

<强> VAL

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

<强>加入

添加的元素(如果有) - 完整的元素对象,而不仅仅是id

<强>除去

删除的元素(如果有) - 完整的元素对象,而不仅仅是id

有关详细信息,请参阅this

谢谢!

答案 3 :(得分:0)

我读了这个问题并且它与我的问题非常接近,所以我决定不发布另一个问题。我想要做的是在select2关闭后,一个简单的文本输入变得集中但它不起作用。请检查

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

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

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

我试图确保输入变得集中,并且表明输入变得集中但我不知道它为什么没有显示光标

答案 4 :(得分:0)

一个老问题,但我上周花了几个小时来找到解决方案。

我正在使用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
});

使用间隔非常重要!

答案 5 :(得分:-1)

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