jQuery 获取选定的选项值（不是文本，而是属性“值”）

小编典典

jQuery 获取选定的选项值（不是文本，而是属性“值”）

all

好的，我有这个代码：

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

我想获得所选选项的值。示例：选择“选项2”，其值为“2”。“2”是我需要得到的值，而不是“选项 2”。

阅读 69

2022-08-17

共1个答案

小编典典

04/2020：更正了旧答案

在选定的选项上使用:selected伪选择器，然后使用.val函数获取选项的值。

$('select[name=selector] option').filter(':selected').val()

旁注：使用过滤器比:selected在第一个查询中直接使用选择器更好。

如果在更改处理程序中，您可以简单地使用this.value来获取选定的选项值。有关更多选项，请参见演示。

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

老答案：

编辑： 正如许多人指出的那样，这不会返回选定的选项值。

~~ 使用 .val 获取所选选项的值。见下文，

$('select[name=selector]').val()~~

2022-08-17