Question

如何获取选择选项的值？

<select id="geo_level_one">
  <option class="" value=""></option>
  <option label="AAA" value="0">AAA</option>
  <option label="BBB" value="1">BBB</option>
  <option label="CCC" value="2">CCC</option>
</select>

标签BBB的值为1。如何使用jQuery返回此值？

Answer 1

val()方法将返回您要查找的内容！所以，$("#geo_level_one").val();

您可以在此更改下拉列表并查看控制台以查看其中的操作。我更新了它以显示获取标签而不使用无效属性 - 好抓，Rory McCrossan！

$("#geo_level_one").change(function() {
  console.log($(this).find("option:selected").text());
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="geo_level_one">
<option class="" value=""></option>
<option value="0">AAA</option>
<option value="1">BBB</option>
<option value="2">CCC</option>
</select>

Answer 2

首先请注意label不是option元素的有效属性。要在元素中存储自定义元数据，请使用data-*属性，例如data-label。

如果我查询标签“AAA”我应该得到0，如果我查询标签“BBB”我应该得到1，如果我查询标签“CCC”我应该得到2

鉴于此声明，您可以使用属性选择器查找所需的option和val()以获取其value。试试这个：

var query = 'BBB';
var val = $('#geo_level_one option[data-label="' + query + '"]').val();

console.log(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="geo_level_one">
  <option class="" value=""></option>
  <option data-label="AAA" value="0">AAA</option>
  <option data-label="BBB" value="1">BBB</option>
  <option data-label="CCC" value="2">CCC</option>
</select>

Answer 3

轻松：

$( "#geo_level_one" ).val();

将返回当前选定的值。

文档：http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

Answer 4

你可以这样做：

var value = $('#geo_level_one').val();

如何获取选择选项的值

4 个答案: