Question

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

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

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

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

在这种情况下，

.onchange不会开火。

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

Here's a fiddle

Answer 1

试试这个.. 第一次警报会给出不变的价值。

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

Answer 2

你可以使用click甚至我不知道它是否适用于所有浏览器的选项看看文档 here，这样您就可以在选项

上获得任何点击事件

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

DEMO -- > http://jsfiddle.net/cR3MQ/5/

Answer 4

试试这个。通过IE11和FireFox 35.01的测试。这个避免了这个bug，在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 5

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

即使没有更改，也可以选择选项

5 个答案: