jQuery 从下拉菜单中获取选定的选项

Question

通常我使用 $("#id").val() 来返回所选选项的值，但这次它不起作用。 所选择的标签具有ID aioConceptName

HTML代码

<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

- William Kinaan

---

你能展示一下 #aioConceptName 元素的标记吗？ - Jorge

可能是重复的问题：jQuery：从下拉菜单中获取选定的选项。 - Kenny Linsky

晚了一步，但是除非在那些<option>标签上设置'value'属性，否则.val()将无法起作用，对吗？ - Jacob Valenta

最近版本的jQuery（经过1.9.1测试）在处理这种标记时没有问题。对于上面的示例，$("#aioConceptName").val()返回choose io。 - Salman A

问一个关于合法破损代码的问题，然后根据正确答案编辑你的问题并修复它，而不更新说它是破损的陈述，这似乎很奇怪，不是吗？ - HoldOffHunger

Answer 1

对于下拉选项，您可能希望使用类似以下内容的代码：

用于选定文本

var conceptName = $('#aioConceptName').find(":selected").text();

对于所选的值

var conceptName = $('#aioConceptName').find(":selected").val();

< p> val()无法解决问题的原因是，点击选项不会更改下拉菜单的值--它只会将:selected属性添加到所选选项中，该选项是下拉菜单的子级。

- Elliot Bonneville

---

好的，你已经在问题中更新了HTML。这个回答现在不再相关。实际上，.val()在你的情况下应该可以工作——你一定在其他地方出错了。 - Elliot Bonneville

为什么不使用 var conceptVal = $("#aioConceptName option").filter(":selected").val(); 来代替 val()？ - Tester

这个 var conceptVal = $("#aioConceptName option:selected").val() 可以简化一下吗？ - Klemen Tusar

虽然经历过其他代码后，我仍然发现这对于查找先前已获取下拉列表中所选选项非常有用 -- 例如： var mySelect = $('#mySelect'); /* …更多代码处理... */ var selectedText = mySelect.find(':selected').text(); - Charles Wood

实际上，他的 .val() 方法不能正常工作是因为他没有给选项设置值，这就是为什么他必须使用你的方法来获取所选文本的原因，另一个修复方法是将 <option>choose io</option> 更改为 <option value='choose io'>choose io</option>。虽然你提供的解决方案可能更快且更实用，但我仍然想提出这一点，以便他更好地理解为什么它对他无效。 - Jordan LaPrise

Answer 2

设置每个选项的值

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val() 没有生效，因为 .val() 返回的是 value 属性。为了使其正常工作，必须在每个 <option> 上设置 value 属性。

现在你可以调用 $('#aioConceptName').val() 代替其他人建议的所有这些 :selected 小把戏。

- Jacob Valenta

---

注意：如果没有选择选项，“$('#aioConceptName').val()”将返回null /“undefined”。 - gordon

这让我确信 $('#myselect').val() 是正确的，我只是愚蠢地忘记给选择器设置 id！ - zzapper

我的选择选项之一是一个特殊的“prompt”选项<option>Please select an option</option>。在我的情况下，添加一个空值属性<option value="">Please...</option>并不会造成问题，但我相信在某些情况下没有值属性是有意义的。总的来说，你的神秘措辞让我感到很开心，所以加一分。 - Cyril Duchon-Doris

val() 不是选择 option 内部的文本而是选择 value 吗？也就是说它会选择 1 而不是 roma。 - deathlock

这段话的意思是：.val() 的主要作用就是获取选定元素的值。如果你想要操作或使用该选项的文本，可以使用 $(":selected").text() 或者将值和文本都设为相同的内容。 - Jacob Valenta

Answer 3

我偶然发现了这个问题，并开发出了比Elliot BOnneville的答案更简洁的版本：

var conceptName = $('#aioConceptName :selected').text();

或者通俗地说：

$('#id :pseudoclass')

这样做可以省去多余的jQuery调用，一次性选择所有内容，更加明确易懂（我个人观点）。

- Ed Orsi

---

@JohnConde，在Meta上被接受的答案与您不同意：http://meta.stackexchange.com/questions/87678/discouraging-w3schools-as-a-resource 。我认为Ed给出了一个很好的答案，并提供了一些额外的参考。 - itsbruce

他们可以允许它，但这仍然是一个糟糕的资源。 - John Conde

删除了w3schools的链接，它并不是必需的，而且在谷歌搜索“jQuery伪类”可以提供大量信息。 - Ed Orsi

@EdOrsi：虽然这样可以避免多调用jQuery，但它无法利用原生的DOM querySelectorAll()方法所提供的性能优势（请参见jQuery文档）。因此，它应该比 Eliot的解决方案慢。 - Alexander Abakumov

我可能更喜欢使用.find(':selected')，因为它允许您从附加到事件的回调中调用它...例如$('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); });。 - Armstrongest

@AlexanderAbakumov：因为:selected是jQuery的扩展，所以速度较慢，我们可以使用:checked代替。:checked映射到内置的CSS功能，因此不会像:selected那样影响性能。 - Ankit Raj Goyal

Answer 4

试试这个来获得价值...

$("select#id_of_select_element option").filter(":selected").val();

或者对于文本使用这个...

$("select#id_of_select_element option").filter(":selected").text();

- Vladimir Djuricic

---

当使用多选下拉菜单时，它只获取第一个值。 - Thimira Pathirana

在这种情况下，您只需从查询中删除“option”单词。 - Vladimir Djuricic

Answer 5

如果您在事件上下文中，使用jQuery，您可以使用以下代码检索所选选项元素：
$(this).find('option:selected')，例如：

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

编辑

正如PossessWithin所提到的，我的答案仅回答了问题: 如何选择所选“选项”。

接下来，要获取选项值，请使用option.val()。

- JoDev

---

完美无缺！只是别忘了在末尾加上 $(this).find('option:selected').val() 来获取选择选项的值，或者 $(this).find('option:selected').text() 来获取文本。 :) - Diego Fortes

最优雅和简单的答案。 - andreszs

现在，你可以将“事件”作为匿名函数的参数添加，然后使用“event.target.value”在更改时获取选择列表的值。 - D. Cook

Answer 6

您是否考虑过使用普通的JavaScript？

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

另请参见使用JavaScript获取选项文本/值

- Roonaan

---

-1 没有足够的 jQuery。 - hanshenrik

Answer 7

$('#aioConceptName option:selected').val();

- wild_nothing

---

这是所有答案中最好的答案，希望在 Stack Overflow 上有一种方法可以请求将正确答案显示在顶部。 - Smitt

Answer 8

使用 JQuery：

1. If you want to get the selected option text, you can use $(select element).text().

   var text = $('#aioConceptName option:selected').text();

2. If you want to get selected option value, you can use $(select element).val().

   var val = $('#aioConceptName option:selected').val();

   Make sure to set value attribute in <option> tag, like:

   <select id="aioConceptName">
     <option value="">choose io</option>
     <option value="roma(value)">roma(text)</option>
     <option value="totti(value)">totti(text)</option>
   </select>
   

使用此HTML代码示例，假设选择了最后一个选项：

1. var text将给你totti(text)
2. var val将给你totti(value)

$(document).on('change','#aioConceptName' ,function(){
  var val = $('#aioConceptName option:selected').val();
  var text = $('#aioConceptName option:selected').text();
  $('.result').text("Select Value = " + val);
  $('.result').append("<br>Select Text = " + text);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
 <option value="io(value)">choose io</option>
 <option value="roma(value)">roma(text)</option>
 <option value="totti(value)">totti(text)</option>
</select>

<p class="result"></p>

- NcXNaV

Answer 9

为了良好的实践，您需要使用val()来获取所选选项的值，而不是使用text()。

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

你可以使用

   $("#aioConceptName").find(':selected').val();

或者

   $("#aioConceptName :selected").val();

- Yusuf Azan

Answer 10

读取下拉列表的值（而不是文本）：

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

如何禁用一个下拉列表？ 在两种情况下，可以使用以下方法改变其值：

A

用户无法与下拉列表进行交互。他也不知道其他选项可能存在。

$('#Status').prop('disabled', true);

B

用户可以看到下拉菜单中的选项，但所有选项都被禁用了：

$('#Status option').attr('disabled', true);

在这种情况下，$("#Status").val()只适用于jQuery版本小于1.9.0，其他变体都可用。

如何更新已禁用的选择框？

从后端代码中仍然可以更新选择框中的值。它仅对用户禁用。

$("#Status").val(2);

在某些情况下，您可能需要触发事件：

$("#Status").val(2).change();

- profimedica

---

当使用多选下拉菜单时，它只获取第一个值。 - Thimira Pathirana