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属性添加到作为下拉列表子级的 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巫毒。

我偶然发现了这个问题,并开发了一个更为简洁的 Elliot BOnneville 答案:

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

或一般而言:

$('#id :pseudoclass')

这样可以节省您额外的 jQuery 调用,一次即可选择所有内容,而且更加清晰(我认为)。

尝试此物有所值...

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

或这个文本...

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

如果您处于事件上下文中,那么在 jQuery 中,您可以使用来检索所选的 option 元素:
$(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()

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

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

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

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

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

读取选择的值(而不是文本):

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

如何禁用选择?在这两种变体中,都可以使用以下方法更改值:

一种

用户无法与下拉列表互动。而且他不知道还有其他选择。

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

用户可以在下拉菜单中看到这些选项,但所有选项均被禁用:

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

在这种情况下, $("#Status").val() 仅适用于小于1.9.0 jQuery 版本。所有其他变体都可以使用。

如何更新禁用的选择?

从后面的代码中,您仍然可以更新选择的值。仅对用户禁用:

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

在某些情况下,您可能需要触发事件:

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

您应该使用以下语法:

var value = $('#Id :selected').val();

因此,请尝试以下代码:

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

您可以在 Fiddle 中进行测试: http//jsfiddle.net/PJT6r/9/

这篇文章中看到这个答案

<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>