关于javascript：jQuery从Dropdown获取选定的选项


jQuery Get Selected Option From Dropdown

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

HTML代码

1
2
3
4
5
6
7
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
相关讨论

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

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

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

相关讨论

设置每个选项的值

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

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

现在你可以调用$('#aioConceptName').val()而不是其他人建议的所有:selected voodoo。

相关讨论

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

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

或者一般地说：

1
$('#id :pseudoclass')

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

相关讨论

试试这个值......

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

或者这个用于文字......

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

如果您在事件上下文中，则在jQuery中，您可以使用以下命令检索所选的选项元素：
$(this).find('option:selected')像这样：

1
2
3
4
5
6
7
$('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吗？

1
2
3
var box = document.getElementById('aioConceptName');

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

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

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

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

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

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

一个

用户无法与下拉列表进行交互。他不知道可能存在哪些其他选择。

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

乙

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

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

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

如何更新禁用的选择？

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

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

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

1
$("#Status").val(2).change();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

$('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);
});
相关讨论

你应该使用这种语法：

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

所以试试这个代码：

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

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

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

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

如果您需要选择的文字，请使用以下代码：

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

或者，如果您需要选择的值，请使用以下代码：

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

对选择元素也使用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.

1
2
3
4
5
$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

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

对于那些发现最佳答案不起作用的人。

尝试使用：

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

在最近的项目中对我有用，所以值得一看。

这应该工作：

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

直截了当，非常简单：

你的下拉菜单

1
2
3
4
5
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

获取所选值的Jquery代码

1
2
3
4
5
6
7
$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

您可以尝试以这种方式调试它：

1
console.log($('#aioConceptName option:selected').val())

我希望这也有助于更好地理解和帮助
试试这个，
$('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-without-value-attribute-using-jquery/

尝试这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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">
<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">

如果你想获取'value'属性而不是文本节点，这将适合你：

1
var conceptName = $('#aioConceptName').find(":selected").attr('value');
相关讨论

获取所选标签的值：

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

如果你想获得文本，请使用以下代码：

1
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

例如=>我选择了这个标签：

1
2
3
4
5
6
7
8
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>


 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
1
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

想象一下，DDL是一个带索引的数组，您正在选择一个索引。 使用JS选择要将其设置为的那个。

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

相关讨论

通常，您不仅需要获取所选值，还需要执行某些操作。那么为什么不避免所有的jQuery魔术，只是将选定的值作为参数传递给动作调用？

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

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

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

虽然下面会给你价值。

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

要获取具有相同class = name的select，您可以执行此操作，以检查是否选择了select选项。

1
2
3
4
5
6
var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() =="") {
        bOK = false;
    }
});

我有同样的问题，我弄清楚为什么它不能解决我的问题
html页面被分成不同的html片段，我发现我有另一个输入字段，它带有select的相同Id，导致val()始终为空
我希望这可以为任何有类似问题的人节省一天。

使用$("＃id")。val，你应该为这个选项添加一个值，如下所示：

1
2
3
4
5
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

否则，你可以使用

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

我希望有帮助..

对于这种情况，你可能最好的选择是使用jQuery的更改方法来查找当前选择的值，如下所示：

1
2
3
4
5
6
7
8
$('#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

});

我更喜欢这种方法，因为您可以在给定的选择字段中为每个选定的选项执行功能。

希望有所帮助！