javascript - 选项和 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();
});

---

更新：

根据文档，.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();
});