jquery - 获取选定的选项，即使它没有改变

Question

选择新选项时，.change可以使用jquery 的事件来获取 a 中的选定值：select

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

如果所选选项未更改，我如何获取该值？

即选择了“选项1”。然后用户再次选择“选项 1”。我需要在这一点上获得价值。

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

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

这是一个小提琴

Answer 1

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

Answer 2

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

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

Answer 3

尝试这个。通过 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 4

试试这样：

(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 5

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