通常我使用$(“#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>

当前回答

如果你想抓取'value'属性而不是文本节点,这将为你工作:

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

其他回答

对于下拉选项,你可能想要这样的东西:

对于选定的文本

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

对于所选值

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

val()没有做到这一点的原因是,单击一个选项并不会改变下拉列表的值——它只是将:selected属性添加到作为下拉列表子项的selected选项中。

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

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

你可以使用

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

Or

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

要用jQuery找到正确的选择,请考虑在html树中可以使用多个选择,这会混淆您的预期输出。

(:selected).val()或(:selected).text()在多个选择选项上不能正确工作。因此,像.map()所做的那样,我们先保留所有选择的数组,然后返回所需的参数或文本。

下面的示例说明了这些问题,并提供了一种更好的方法

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

在变体a, b中,与正确工作的c和d相比,它将所有选择保存在数组中,然后返回您所寻找的内容,从而看到不同的容易出现错误的输出。

我也有同样的问题,我想知道为什么它对我的案子不起作用 html页面被划分为不同的html片段,我发现我有另一个输入字段携带相同的Id的选择,这导致val()总是空的 我希望这能拯救那些有类似问题的人。

您可以使用精确选择的选项进行选择: 下面将给出innerText

$("select#aioConceptName > option:selected").text()

而下面将给你价值。

$("select#aioConceptName > option:selected").val()