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

Question

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

Answer 1

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

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

val()无法解决问题的原因是因为单击选项不会更改下拉列表的值 - 它只会将:selected属性添加到所选选项，即<下拉列表的em> child 。

Answer 2

设置每个选项的值

<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上设置<option>属性。

现在，您可以致电$('#aioConceptName').val()而不是其他人建议的所有:selected伏都教。

Answer 3

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

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

或一般地说：

$('#id :pseudoclass')

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

Answer 4

试试这个值......

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

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

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

Answer 5

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

修改

如PossessWithin所述，我的回答只是回答问题：如何选择所选的“选项”。

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

Answer 6

你考虑过使用普通的旧javascript吗？

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

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

另见Getting an option text/value with JavaScript

Answer 7

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

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

Answer 9

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

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

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

<强> A

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

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

<强>乙

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

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

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

如何更新已禁用的选择？

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

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

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

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

Answer 10

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

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

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

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

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

Answer 11

也可以使用jQuery.val()功能选择元素：

  

.val（）方法主要用于获取表单元素的值   例如input，select和textarea。在选择元素的情况下，它   如果未选择任何选项，则返回null，并返回包含该选项的数组   当至少有一个时，每个选定选项的值都是   可以选择更多，因为multiple属性存在。

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

Answer 12

您应使用以下语法：

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

因此，请尝试以下代码：

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

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

在this post中查看此答案

Answer 13

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

尝试使用：

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

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

Answer 14

这应该有效：

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

Answer 15

使用此模式（语法）：

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

因此替换您的变量并尝试以下代码：

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

然后享受它！

Answer 16

您可以尝试通过以下方式对其进行调试：

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

Answer 17

直截了当，非常简单：

您的下拉列表

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

jQuery代码以获取所选值

$('#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.
});

Answer 18

尝试这个

$(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">

Answer 19

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

Answer 20

如果你想抓住“价值”＆＃39;属性而不是文本节点，这将适合您：

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

Answer 21

尝试

aioConceptName.selectedOptions[0].value

let val = aioConceptName.selectedOptions[0].value

console.log('selected value:',val);

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

Answer 22

这是解决此问题的简单方法。

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Answer 23

尝试此代码：

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

Answer 24

只有一种正确的方法可以找到所选选项 - 通过 option value 属性。所以拿简单的代码：

//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );

所以如果你有这样的列表：

<select id="#mySelect" >
  <option value="value1" >First option</option>
  <option value="value2" >Second option</option>
  <option value="value3" selected >Third option</option>
</select>

如果您使用 selected 属性作为 option，那么 find(":selected") 将给出错误的结果，因为 selected 属性将永远保持在 option，即使用户选择了另一个选项。

即使用户选择第一个或第二个选项，$("select option:selected") 的结果也会给出两个元素！所以 $("select :selected").text() 将给出类似“第一个选项第三个选项”

的结果

所以使用 value 属性选择器，不要忘记为所有选项设置 value 属性！

Answer 25

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

Answer 26

要使用$（“＃id”）。val，应在选项中添加一个值：

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

否则，您可以使用

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

我希望能有所帮助..

Answer 27

要获取所选标签的值：

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

如果要获取文本，请使用以下代码：

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

例如=>我已选择此标签：

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Answer 28

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

将DDL想象成一个带有索引的数组，您正在选择一个索引。选择要与JS一起设置的那个。

Answer 29

要获取具有相同类名的选择，可以执行此操作，以检查是否选择了选择选项。

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

Answer 30

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

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

以下内容将为您带来价值。

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

Answer 31

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

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

Answer 32

尝试此代码：：）

获取价值：

 $("#Ostans option:selected").text() + '.' + $("#shahrha option:selected").text()

获取文本：

session.createAnchor(camera.getPose());

Answer 33

这是一个简单的解决方案：

var val = $('#mylist option:selected').text()

检查这个例子：JsFiddle。

Answer 34

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

Answer 35

在这种情况下，您最好的选择是使用jQuery's change method查找当前选定的值，如下所示：

$('#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

});

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

希望有所帮助！