jQuery从下拉列表中获取所选选项

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

对于选定的文本

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

对于选定值

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

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

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

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

或一般：

$('#id :pseudoclass')

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

试试这个价值…

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

或者这个用于文本…

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

要使用jQuery找到正确的选择，请考虑在html树中可以使用多个选择，并混淆您的预期输出。

(:selected).val()或(:selected).text()将没有在多个选择选项上正确工作。因此，我们首先保留一个包含所有选择的数组，就像.map()可以做的那样，然后返回所需的参数或文本。

以下示例说明了这些问题并提供了更好的方法

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

查看变体a， b中不同的bug倾向输出，与正确工作的c&d相比，后者将所有选择保留在数组中，然后返回您要查找的内容。

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

var box = document.getElementById('aioConceptName');
conceptName = box.options[box.selectedIndex].text;

另见使用JavaScript获取选项文本/值

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

$('dropdown_selector').change(function() {//Use $option (with the "$") to see that the variable is a jQuery objectvar $option = $(this).find('option:selected');//Added with the EDITvar value = $option.val();//to get content of "value" attribvar text = $option.text();//to get <option>Text</option> content});

编辑

如拥有内所述，我的答案只是回答问题：如何选择选定的“选项”。

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

设置每个选项的值

<label for="aioConceptName">AIO Concept Name</label><select id="aioConceptName"><option value="0">choose io</option><option value="1">roma</option><option value="2">totti</option></select>

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

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

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

对于任何发现最佳答案的人来说，这是行不通的。

尝试使用：

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

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

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

如果您需要选定的文本，请使用此代码：

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

或者如果您需要选定的值，请使用此代码：

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

这应该工作：

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

$(function() {$('#aioConceptName').on('change', function(event) {console.log(event.type + " event with:", $(this).val());$(this).prev('input').val($(this).val());});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label>Name</label><input type="text" name="name" /><select id="aioConceptName"><option>choose io</option><option>roma</option><option>totti</option></select>

也可以使用#0函数来选择元素：

. val（）方法主要用于获取表单元素的值例如输入、选择和文本区域。在选择元素的情况下，它当未选择任何选项并且数组包含每个选项的值，当至少有一个并且它是可以选择更多，因为存在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>

如果您想获取“value”属性而不是文本节点，这将适用于您：

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

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

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

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

一个

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

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

B

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

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

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

如何更新禁用的选择？

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

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

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

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

我希望这也有助于更好地理解和帮助试试下面这个，

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

试试这个

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

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

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

$('#aioConceptName').change(function(){
//get the selected val using jQuery's 'this' method and assign to a varvar selectedVal = $(this).val();
//perform the rest of your operations using aforementioned var
});

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

希望有帮助！

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

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

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

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

下面会给你价值。

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

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

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

要获取具有相同class=name的选择，您可以这样做，以检查是否选择了选择选项。

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

你应该使用这个语法：

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

试试这个代码：

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

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

看看这个答案这篇文章

简单而简单：

你的下拉菜单

<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 EDITvar value = $option.val(); //returns the value of the selected option.var text = $option.text(); //returns the text of the selected option.});

我也遇到了同样的问题，我明白了为什么我的案子不起作用
html页面被分成不同的html片段，我发现我有另一个带有select相同ID的输入字段，这导致val()总是为空
我希望这对任何有类似问题的人都有帮助。

为了获得良好的实践，您需要使用val()来获取所选选项的值，而不是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();

对于获取所选标签的值：

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

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

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

这是这个问题的简单解决方案。

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

试试看

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>

试试这个代码：：）

获取值：

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

获取文本：

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

使用jQuery：

1. 如果要获取所选选项文本，可以使用$(select element).text()。

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

2. 如果您想选择选项值，可以使用$(select element).val()。

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

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

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

使用此超文本标记语言代码示例，假设最后一个选项被选中：

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="aioConceptName"><option value="io(value)">choose io</option><option value="roma(value)">roma(text)</option><option value="totti(value)">totti(text)</option></select>
<p class="result"></p>

只有一种正确的方法来查找选定的选项-通过optionvalue属性。所以采用简单的代码：

//find selected option$select = $("#mySelect");$selectedOption = $select.find( "option[value=" + $select.val() + "]" );//get selected option textconsole.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>

如果您为option使用selected属性，那么find(":selected")将给出不正确的结果，因为selected属性将永远停留在option，即使用户选择了另一个选项。

即使用户选择第一个或第二个选项，$（“选择选项：选择”）的结果也会给出两个元素！所以$（“选择：选择”）. text（）会给出类似“第一种选择”的结果

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

大家可以试试这个：

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