从下拉菜单中选择jQuery获取选项

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()返回所选选项的值，但是这次它不起作用。所选标签具有id aioConceptName。

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>

19 个解决方案

#1

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 :selected property to the selected option which is a child of the dropdown.

val()不这么做的原因是，单击一个选项并不会改变下拉菜单的值——它只是将:selected属性添加到该下拉菜单的子选项中。

#2

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 value attribute. To have it work properly, the value attributes must be set on each <option>.

$('#aioConceptName').val()无效，因为.val()返回值属性。要使其正常工作，必须在每个 <选项> 上设置值属性。

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

现在您可以调用$('#aioConceptName').val()而不是所有这些:被其他人推荐的选定的伏都教。

#3

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调用，一次选中所有内容，并且更清晰(我的观点)。

#4

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();

#5

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

正如owner within所提到的，我的回答只是对如何选择“选项”这个问题的回答。

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

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

#6

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获取选项文本/值

#7

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

#8

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

#9

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

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 work for jQuery versions smaller than 1.9.0. All other variants will work.

在本例中，$(“#Status”).val()只适用于小于1.9.0的jQuery版本。所有其他变体都可以工作。

How to update a disabled select?

如何更新已禁用的选择?

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

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

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

In some cases you might need to fire events:

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

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

#10

Using jQuery, just add a change event and get selected value or text within that handler.

使用jQuery，只需添加一个更改事件，并在该处理程序中获取选定的值或文本。

If you need selected text, please use this code:

如果您需要选择文本，请使用以下代码:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Or if you need selected value, please use this code:

或如需要选择值，请使用此代码:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

#11

Use the jQuery.val() function for select elements, too:

对于select元素，也可以使用jQuery.val()函数:

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present.

.val()方法主要用于获取表单元素的值，如input、select和textarea。在选择元素的情况下，当没有选择选项时，它返回null，并且在至少有一个选项时，数组包含每个选中选项的值，并且可以选择更多，因为存在多个属性。

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

#12

For anyone who found out that best answer don't work.

对于任何发现最佳答案的人，都不要工作。

Try to use:

尝试使用:

  $( "#aioConceptName option:selected" ).attr("value");

Works for me in recent projects so it is worth to look on it.

在最近的项目中为我工作，所以值得一看。

#13

Just this should work:

只是这应该工作:

var conceptName = $('#aioConceptName').val();

#14

If you want to grab the 'value' attribute instead of the text node, this will work for you:

如果您想要获取“value”属性而不是文本节点，这将为您工作:

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

#15

I hope this also helps to understand better and helps try this below, $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
to more details please http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

我希望这也有助于更好地理解，并帮助尝试如下，$('select[id="aioConceptName[]"] option:selected').each(function(key,value){options2[$(this).val()] = $(this).text();console.log(JSON.stringify(options2));});要了解更多细节，请访问http://www.drtuts.com/get-value-multi-select-dropdown- withoutvalue - attribut-using-jquery/

#16

Probably your best bet with this kind of scenario is to use jQuery's change method to find the currently selected value, like so:

对于这种场景，最好的方法可能是使用jQuery的change方法来查找当前选择的值，如下所示:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

I prefer this method because you can then perform functions for each selected option in a given select field.

我更喜欢这个方法，因为您可以在给定的select字段中为每个选定的选项执行函数。

Hope that helps!

希望会有帮助!

#17

try to this one

尝试这个

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

#18

You can use $("#drpList").val();

您可以使用$(" # drpList ").val();

#19

Usually you'd need to not only get the selected value, but also run some action. So why not avoid all the jQuery magic and just pass the selected value as an argument to the action call?

通常，您不仅需要获取所选的值，还需要运行一些操作。那么，为什么不避免使用jQuery魔法，将选中的值作为参数传递给action调用呢?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>