即使没有更改，也可以获取选定的选项

Question

jquery 的.change 事件可用于在选择新选项时获取select 中的选定值：

$('select').change(function() {
    var selectedValue = $('option:selected').val();
    console.log(selectedValue);
});

如果选择的选项没有改变，我如何获取值？

即选择了“选项 1”。然后用户再次选择“选项 1”。我需要 获取此时的值。

.onchange 在这些情况下不会触发。

还有其他可以使用的事件吗？

Here's a fiddle

Answer 1

$('.yourSelect option').click(function() {
    var selectedValue = $('.yourSelect').val();
    console.log(selectedValue);
});

Answer 2

试试这个。通过 IE11 和 FireFox 35.01 测试。 这个避免了 Dhaval Marthak 的代码示例中的错误，无论您是否单击该选项，都会在第二次单击时调用该函数。

更多： http://jsfiddle.net/cR3MQ/11/

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var $select = $(this);
            var val = $select.val();
            $(this).children('option').on('click',function() {
                if(val === $(this).val()){
                    $select.trigger('unchange');
                }else{
                    // $select.trigger('change');
                }
                fn(this);
                val = $select.val();
            });
        });
    }
})(jQuery);

$('select').selected(function(val) {
    alert(val.value)
}).on('unchange',function(){
    alert('unchange');
}).on('change',function(){
    alert('change');
});

支持 chrome（版本 40.0.2214.115m）、Firfox 35.01、IE 11： http://jsfiddle.net/cR3MQ/13/

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var $select = $(this);
            var val = $select.val();
            var optionClick = false;
           $(this).children('option').each(function(i,e){
                $(this).get(0).onclick = function() {
                    optionClick=true;
                    if(val === $(this).val()){
                        $select.trigger('unchange');
                    }else{
                        // $select.trigger('change');
                    }
                    fn(this);
                    val = $select.val();
                }
            });

            var clicked = 0, changed = 0;
            $select.on('change',function(){
                changed++;
            }).on('click',function(ev){
                if(true === optionClick){
                    /*do nothing*/                  
                }else{
                    if(0 === changed && 0 > ev.offsetX && 0 > ev.offsetY){
                        $select.trigger('unchange');
                            fn(this);
                    }else{             
                        changed = 0;
                    }
                }
            });
        });

    }
})(jQuery);

$('select').selected(function(val) {
    console.log(val.value)
}).on('click',function(ev){
     //console.log(ev);
}).on('unchange',function(){
    console.log('unchange');
}).on('change',function(){
    console.log('change');
});

Answer 3

试试这样：

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

$('select').selected(function(val) {
    alert(val.value)
});

演示 -- > http://jsfiddle.net/cR3MQ/5/

Answer 4

您甚至可以在我不知道它是否适用于所有浏览器的选项上使用 click 查看文档 here，这样你就可以得到options的任意点击事件

Answer 5

试试这个.. 第一个警报将给出不变的值。

var defaultVal = $('select').val();
alert(defaultVal);
$('select').change(function() {
   var selectedValue = $(this).val();
alert(selectedValue);
});