jquery - select要素のオプションが選択されたときに選択された値をすぐに取得する方法は?

Question

ユーザーがhtmlのselect要素でオプションを選択するとすぐに、それに応じて何かを表示したいと思います。したがって、ユーザーが選択したときに、jquery を介して選択したオプションの値をすぐに取得する必要があります。私のjqueryは次のとおりです(かなり単純です):

   $('select').live('click', function(event){
            console.log($('select').val());
        });

しかし、問題は、選択要素をクリックするたびに、最初にその現在の値が表示され、次にオプションをクリックしたときに選択した値が表示されることです。これは私が望むものではありません。現在の値は必要ありません。今回選択した値が必要なだけです。では、jqueryでこれをどのように達成すればよいですか?

Answer 1

ページに複数の選択要素がある場合は、ページの最初の選択要素の値のみを返す場合、changeイベントをリッスンし、thisハンドラーで現在の選択要素を参照するキーワードを使用する必要があります。$('select').val()また、liveメソッドは非推奨であることに注意してください。イベントを委任する場合は、代わりにメソッドを使用できますon。

$(document).on('change', 'select', function(event){
    console.log( this.value );        
    // console.log( $(this).val() );
});

Answer 2

これを試して：

 $('select').change(function(event){
         console.log($('select').val());
    });

JSFiddle

Answer 3

セレクトボックス変更イベントに変更します。以下のコードを試してください

$('select').live('change', function(event){
            console.log($(this).val());
        });

（または）

$('select').change(function(event){
                console.log($(this).val());
            });

Answer 4

次のように、選択した値を取得できます。

$('#select').change(function() {
        var selectVal = $('#select :selected').val();
    });