选择select元素中的选项时如何立即获取所选值？

Question

一旦用户在html的select元素中选择一个选项，我想相应地显示一些内容。因此，当用户做出选择时，我需要通过jquery立即获取所选的选项值。我的jquery如下（非常简单）：

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

但问题是，每次单击select元素时，它都会首先显示它的当前值，然后显示单击选项时选择的值，这不是我想要的。我不需要当前值，我只想要你这次选择的值。那么我应该如何在jquery中实现这一点呢？

Answer 1

您应该收听change事件，并在处理程序中使用this关键字引用当前选择元素，如果您的页面$('select').val()中只有一个选择元素返回页面中第一个select元素的值。另请注意，live方法已弃用，如果您要委托事件，则可以使用on方法。

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

Answer 2

将其更改为选择框更改事件。请尝试以下代码

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

（OR）

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

Answer 3

试试这个：

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

<强> JSFiddle

Answer 4

您可以像这样获得所选的值：

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