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

Question

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

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属性添加到所选选项,该选项是下拉列表的子项.

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;

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

Answer 7

使用JQuery：

1. 如果你想获取选中的选项文本，可以使用$(select element).text().

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

2. 如果你想获取所选选项的值，可以使用$(select element).val().

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

   确保value在标签中设置属性<option>，例如：

   <select id="aioConceptName">
     <option value="">choose io</option>
     <option value="roma(value)">roma(text)</option>
     <option value="totti(value)">totti(text)</option>
   </select>
   

对于此 HTML 代码示例，假设选择了最后一个选项：

1. var text会给你totti(text)
2. var val会给你totti(value)

<select id="aioConceptName">
  <option value="">choose io</option>
  <option value="roma(value)">roma(text)</option>
  <option value="totti(value)">totti(text)</option>
</select>

$(document).on('change','#aioConceptName' ,function(){
  var val = $('#aioConceptName option:selected').val();
  var text = $('#aioConceptName option:selected').text();
  $('.result').text("Select Value = " + val);
  $('.result').append("<br>Select Text = " + text);
})

Answer 8

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

Answer 9

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

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() 只适用于小于的jQuery版本1.9.0.所有其他变体都可以使用.

如何更新禁用的选择？

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

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

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

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

Answer 10

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

你应该使用这种语法:

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

所以试试这个代码:

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

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

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

Answer 12

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

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

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

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

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

Answer 13

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

.val()方法主要用于获取表单元素的值,例如input,select和textarea.在select元素的情况下,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 14

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

尝试使用:

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

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

Answer 15

对于良好的实践，您需要使用val()来获取所选选项的值 not text()。

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

您可以使用

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

或者

   $("#aioConceptName :selected").val();

我希望这有帮助..

Answer 16

要获取所选标签的值：

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

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

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

例如：

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Answer 17

这应该工作:

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

Answer 18

我希望这也有助于更好地理解并有助于在下面尝试这个，

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

你可以尝试这样调试：

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

Answer 20

直截了当，非常简单：

您的下拉菜单

<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.
});