jquery - 変更されていない場合でも選択されたオプションを取得する

Question

jquery の.changeイベントを使用してselect、新しいオプションが選択されたときに選択された値を取得できます。

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

選択したオプションが変更されていない場合、どうすれば値を取得できますか?

つまり、「オプション 1」が選択されます。次に、ユーザーは「オプション 1」を再度選択します。この時点で値を取得する必要があります。

.onchangeこのような状況では発火しません。

他に利用できるイベントはありますか？

ここにフィドルがあります

Answer 1

オプションでもクリックを使用できます。すべてのブラウザーで機能するかどうかはわかりません。 ここのドキュメントを確認してください。この方法で、オプションのクリックイベントを取得できます。

Answer 2

これを試して。IE11 および FireFox 35.01 でのテストに合格しました。これは、オプションをクリックしたかどうかに関係なく、2 回目のクリックで関数を呼び出す 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

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