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

jQuery Get Selected Option From Dropdown

提问by William Kinaan

Usually I use $("#id").val()to return the value of the selected option, but this time it doesn't work. The selected tag has the id aioConceptName

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

html code

html代码

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

回答by Elliot Bonneville

For dropdown options you probably want something like this:

对于下拉选项，您可能需要这样的东西：

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

The reason val()doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selectedproperty to the selected option which is a childof the dropdown.

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

回答by Jacob Valenta

Set the values for each of the options

为每个选项设置值

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()didn't work because .val()returns the valueattribute. To have it work properly, the valueattributes must be set on each <option>.

$('#aioConceptName').val()不起作用，因为.val()返回了value属性。要使其正常工作，value必须在每个<option>.

Now you can call $('#aioConceptName').val()instead of all this :selectedvoodoo being suggested by others.

现在你可以打电话$('#aioConceptName').val()而不是:selected其他人建议的所有这些巫术。

回答by Ed Orsi

I stumbled across this question and developed a more concise version of Elliot BOnneville's answer:

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

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

or generically:

或一般：

$('#id :pseudoclass')

This saves you an extra jQuery call, selects everything in one shot, and is more clear (my opinion).

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

回答by Vladimir Djuricic

Try this for value...

试试这个值...

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

or this for text...

或者这对于文本...

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

回答by JoDev

If you are in event context, in jQuery, you can retrieve the selected option element using :
$(this).find('option:selected')like this :

如果您处于事件上下文中，则在 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
});

Edit

编辑

As mentioned by PossessWithin, My answer just answer to the question : How to select selected "Option".

正如PossessWithin所提到的，我的回答只是回答这个问题：如何选择选定的“选项”。

Next, to get the option value, use option.val().

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

回答by Roonaan

Have you considered using plain old javascript?

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

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

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

See also Getting an option text/value with JavaScript

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

回答by wild_nothing

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

回答by profimedica

Reading the value (not the text) of a select:

读取选择的值（不是文本）：

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

How to disable a select?in both variants, value can be changed using:

如何禁用选择？在这两种变体中，可以使用以下方法更改值：

A

一种

User can not interact with the dropdown. And he doesn't know what other options might exists.

用户无法与下拉菜单交互。他不知道还有什么其他选择。

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

B

乙

User can see the options in the dropdown but all of them are disabled:

用户可以在下拉列表中看到选项，但所有选项都被禁用：

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

In this case, $("#Status").val()will only workfor jQuery versions smaller than 1.9.0. All other variants will work.

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

How to update a disabled select?

如何更新禁用的选择？

From code behind you can still update the value in your select. It is disabled only for users:

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

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

In some cases you might need to fire events:

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

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

回答by Ol Sen

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

回答by D.L.MAN

you should use this syntax:

你应该使用这个语法：

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

So try this Code:

所以试试这个代码：

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

you can test in Fiddle: http://jsfiddle.net/PJT6r/9/

你可以在小提琴中测试：http: //jsfiddle.net/PJT6r/9/

see about this answer in this post

在这篇文章中看到这个答案