jQuery和'select'标签

Question

我有<select>标记，我需要选择所选选项的值。

<select id="foo">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

使用jQuery我尝试使用val()方法来执行此操作：

$('#foo').val();

问题是它总是返回1 - 所选选项的默认值！

为什么会这样？

Answer 1

试试这个

$("#foo option:selected").val();

编辑：DEMO here

Answer 2

如果<select>元素不包含selected属性的选项，则默认选择第一个选项。

如果更改选择并运行val()，您将获得不同的值。

试试这个并告诉我每次更改时它是否仍然给你相同的值

$('#foo').change(function() {
    console.log($(this).val());
});

Answer 3

试试这个：

 $('#foo :selected').val();

检查一下：

$('#foo').change(function() {
    console.log($('#foo :selected').val());
}).change(); // this change will fire for first time and give the value `1`

Answer 4

$("select option:selected").each(function () {
    $(this).val();
});

Answer 5

如果您的多个DOM元素具有您在选择器中使用的id属性，也会发生这种情况。

jQuery会将事件正确绑定到所有元素，但在请求其值时只使用DOM中的第一个元素。