jQuery，在已选择的选项上也触发更改[重复]

Question

我的select 有问题。 我希望already selected 选项也触发.change() 功能。 目前它仅在选择另一个选项时触发。 如果没有太多 Soucrecode，我怎么能把这种可能性放在一起。也许已经有一种我不知道的可能性。

Here a fiddle with an example

编辑：

我也许应该提到它应该可以在移动浏览器上运行！

Answer 1

编辑： IE 不能很好地处理它！ :(

要支持 IE，你可以使用：

--DEMO--

$(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();
    });
});

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

--DEMO--

$(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);
        }
    });
});

Answer 2

by Daniel Eidson

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

DEMO

在 HTML 中：添加 id 以选择

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