jQuery，对已选择的选项也触发change事件

Question

我有一个关于我的 select 的问题。 我希望 已选择的 选项也触发 .change() 函数。 目前只有在选择另一个选项时才会触发。 如何在不添加太多源代码的情况下实现这个功能。或许已经有我不知道的方法了。 这里有一个示例 编辑： 我应该提到它应该在移动浏览器上工作！

- Nano

---

你能展示一下你的代码吗？看看你尝试了什么。 - Francisco Corrales Morales

由事件名称可知，更改仅在值更改时触发... - Mr.TK

为什么需要在选择已选项目时重新触发它？从用户界面的角度来看，您不会期望事件发生，因为没有任何更改。 - iCollect.it Ltd

@TimRücker，你只是想让事件在默认值触发吗？如果是这样，在绑定事件后，只需使用.change()即可，演示在此。 - billyonecan

@FranciscoCorrales 它在移动浏览器上能用吗？ - Nano

Answer 1

编辑：IE浏览器无法很好地处理此内容！:(

为了支持IE浏览器，你可以使用以下方法：

--演示--

$(document).ready(function () {
    var con = $('#console');
    $('select').change(function () {        
        /* change also on already selected option */
        con.append('- ' + $(this).val() + '<br/>');
        //$(this).blur();
    }).change().bind('mousedown', function () {
        this.selectedIndex = -1;
        this.selectedIndex = $(this).find('option:selected').index();
    });
});

看看这是否符合您的需求：

--演示--

（注：保留了原文中的HTML标签）

$(document).ready(function () {
    var con = $('#console');
    $('select').change(function () {        
        /* change also on already selected option */
        con.append('- ' + $(this).val() + '<br/>');
    }).change().bind('mousedown', function () {
        //on mousedown, clone SELECT element to display current selected value
        // this would be empty value otherwise when setting current selected index
        // NOTE: seems to be still not as good on IE...
        // FF would need to redefine some margin/padding
        if (!$(this).data('cloned')) $(this).data('cloned', $(this).clone().css({
            position: 'absolute',
            pointerEvents: 'none',
            top: this.offsetTop,
            left: this.offsetLeft,
            margin: 0
        }).appendTo('body'));
        // here set selectedIndex of SELECT element to not defined index
        // this would let on change event to be fired in all cases
        this.selectedIndex = -1;
    }).blur(function(){
        // on blur, remove cloned SELECT element and reset specific data object
        if ($(this).data('cloned')) {
            this.value = $(this).data('cloned').val();
            $(this).data('cloned').remove();
            $(this).data('cloned', null);
        }
    });
});

- A. Wolff

---

有趣...你能解释一下它是如何工作的吗？ - iCollect.it Ltd

@TrueBlueAussie 将 this.selectedIndex = -1 设置为触发任何选项选择时的 onchange 事件。使用克隆元素进行 UI，否则 SELECT 反映的值将为空。这需要进行更多测试以查看是否符合 OP 的需求。我不确定这是否能处理所有预期情况。 - A. Wolff

我认为那符合我的需求。如果你能在回答中解释你的代码，我会将你的回答标记为正确的。 - Nano

我必须承认，那真是相当聪明！ - Nano

很不幸的是，IE浏览器的行为非常丑陋。点击反应和显示几乎无法使用。也许需要对IE进行一些调整，使其完美无缺？ - iCollect.it Ltd

@TrueBlueAussie 这个在IE上可以工作：http://jsfiddle.net/G257s/20/ 编辑：仍需要一些IE8的shim :( - A. Wolff

Answer 2

由丹尼尔·艾德森撰写

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);

演示

在HTML中：添加一个id来选择

<select id="select">
    <option selected>Selected</option>
    <option>Not selected</option>
</select>
<div id="console"></div>

- mohamedrias

---

完全不起作用...它触发得太早了，在进行选择之前。 - Nano

请检查演示网址，您会发现它运行良好。 - mohamedrias

OP希望在用户更改选项或不更改选项时触发事件。所以根据我的理解，这样做是可以的。它在演示中也能正常工作。 - mohamedrias

抱歉。根据丹尼尔在另一个问题中的回答，我已经更新了答案。 - mohamedrias

你能解释一下你在哪里定义了.select2()函数吗？ - Nano