jQuery 从下拉列表中获取选定的选项

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

HTML 代码

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

答案

对于下拉选项，您可能需要以下内容：

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

val()不起作用的原因是因为单击选项不会更改下拉列表的值 - 它只是将:selected属性添加到所选选项，该选项是下拉列表的子项。

设置每个选项的值

<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其他人建议:selected伏都$('#aioConceptName').val() 。

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

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

或者一般地说：

$('#id :pseudoclass')

这为您节省了额外的 jQuery 调用，一次性选择所有内容，并且更清晰（我的观点）。