选项和 jQuery .click() 不能一起工作

Question

这在 FF 中效果很好，但在 IE、Chrome 或 Safari 中效果不佳。

$('#countryDropDown option').click(function() {
   var countryID = $(this).val();
   dostuff();
});
// countryDropDown = id of select

所以，如您所见，我想为每个选项附加一个点击事件。

我也试过了

var allOpts = $('#countryDropDown option'),
   l = allOpts.length,
   i = 0;

for (i = 0; i < l; i += 1) {
    $(allOpts[i]).click(function() {
        var countryID = $(this).val();
        doStuff();
    });
}

它仍然不想在除 FF 之外的任何其他浏览器中工作。我究竟做错了什么？ 谢谢

Answer 1

问题是您是否真的需要这样做。我打赌你不需要访问option 元素，所以你也可以使用.change()：

var countryID;

$('#countryDropDown').change(function() {
   countryID = $(this).val();
   dostuff();
});

---

更新：

根据documentation，.val() 应该可以工作，但如果由于某种原因不起作用，请执行以下操作：

var countryID;
$('#countryDropDown').change(function() {
   countryID = $('option:selected', this).val();
   dostuff();
});

---

更新2：

我不知道它是否相关（我认为它应该可以工作）但可能是您的 option 元素没有 value 属性，喜欢这样：

<option>Foo</option>

如果是这样，您应该尝试使用.text() 而不是.val()。

$('option:selected', this).text();

Answer 2

喵，我们也有同样的问题……

这是解决方案：

如果你想访问每个选项的 id。这样就可以了。

$("#countryDropdown").change(function() {
   var countryId = $('option:selected',this).attr('id');
   dostuff();
});

Answer 3

val() 用于检索表单元素的值。如果您愿意，选项不是表单元素而是子元素。此外，如果他们使用键盘，您的方法将不起作用。你最好这样做。

$("#countryDropdown").change(function() {
    var countryId = $(this).val();
    dostuff();
});