使用 jQuery 查看下拉菜单选择是否已更改

Using jQuery to see if a drop down menu select has changed

提问by OtagoHarbour

I would like to see if a particular drop down menu item has been selected or deselected.

我想查看是否已选择或取消选择特定的下拉菜单项。

I have tried

我试过了

jQuery("#dropdownID option[value='selectionKey']").change(function() {
    if (jQuery("#dropdownID option[value='selectionKey']").attr('selected', 'selected'))
        DoSomething();
    else DoSomethingElse();
});

and

和

jQuery("#dropdownID").change(function() {
    if (jQuery("#dropdownID option[value='selectionKey']").attr('selected', 'selected'))
        DoSomething();
    else DoSomethingElse();
});

but neither block is triggered by changing the selection in the drop down menu. That is, it never gets to the if statement.

但是这两个块都不会通过更改下拉菜单中的选择来触发。也就是说，它永远不会到达 if 语句。

回答by tnschmidt

You can try something like this in jquery versions less than 1.7:

你可以在低于 1.7 的 jquery 版本中尝试这样的事情：

$("#dropdownID").live('change', function() {
    if ($(this).val() == 'selectionKey'){
        DoSomething();
    } else {
        DoSomethingElse();
    }
});

You can try something like this in jquery versions greater than 1.7:

您可以在 1.7 以上的 jquery 版本中尝试这样的操作：

$("#dropdownID").on('change', function() {
    if ($(this).val() == 'selectionKey'){
        DoSomething();
    } else {
        DoSomethingElse();
    }
});

回答by Lightsaber

Try these:

试试这些：

jQuery("#dropdownID").change(function() {
    if (jQuery("#dropdownID option[value=selectionKey]").attr('selected', 'selected')) {
        DoSomething();
    }
    else {
DoSomethingElse();
}
});

回答by Brian

Try this jsFiddle

试试这个jsFiddle

<select id="dropdown1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

$(document).ready(function() {
    $('#dropdown1').change(function() {
        alert($(this).val());
    });
});

回答by doniyor

or even less code:

甚至更少的代码：

<select id="dropdown1">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

$(function() { //<------- stands for $(document).ready..
  $('#dropdown1').change(function() {
     alert($(this).val());
  });
 });

回答by Rocket Hazmat

You need to bind the event to the <select>, not to the <option>. Also you should just simply check if the value is what you want.

您需要将事件绑定到<select>，而不是绑定到<option>。此外，您应该简单地检查该值是否是您想要的。

jQuery("#dropdownID").change(function () {
    if ($(this).val() === 'selectionKey'){
        DoSomething();
    }
    else{
        DoSomethingElse();
    }
});

回答by Karl-André Gagnon

Try this :

尝试这个 ：

jQuery("#dropdownID").change(function() {
    if (jQuery("#dropdownID option[value='selectionKey']").is(':selected'))
        DoSomething();
    else DoSomethingElse();
});

But your second method should work if you compare them :

但是如果你比较它们，你的第二种方法应该有效：

jQuery("#dropdownID").change(function() {
    if (jQuery("#dropdownID option[value='selectionKey']").attr('selected') == 'selected')
        DoSomething();
    else DoSomethingElse();
});

But it is alway better to use .prop(), it will return a boolean :

但使用总是更好.prop()，它会返回一个布尔值：

jQuery("#dropdownID").change(function() {
    if (jQuery("#dropdownID option[value='selectionKey']").prop('selected')
        DoSomething();
    else DoSomethingElse();
});