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

【问题标题】：jQuery Get Selected Option From DropdownjQuery 从下拉列表中获取选定的选项
【发布时间】：2022-01-21 01:24:46
【问题描述】：

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

【问题讨论】：

能否显示元素#aioConceptName的标记
这很奇怪，因为在这个例子上工作jsfiddle.net/pAtVP，你确定它在你的环境中触发的事件吗？
jQuery: Get selected option from dropdown的可能重复
一个迟到的想法，但 .val() 将不起作用，除非您在那些 <option>s 上设置 value 属性，对吧？
最新版本的 jQuery（用 1.9.1 测试）在这个标记上没有问题。对于上面的例子，$("#aioConceptName").val() 返回choose io。

标签： javascript html jquery drop-down-menu

【解决方案1】：

使用 JQuery：

如果要获取选中的选项text，可以使用$(select element).text()。

var text = $('#aioConceptName option:selected').text();
如果你想获得选中的选项value，可以使用$(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>
```

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

var text 会给你totti(text)
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>

【讨论】：

【解决方案2】：

要使用 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 中不同的容易出错的输出，与正确工作的 c & d 相比，将所有选择保存在一个数组中，然后返回您要查找的内容。

【讨论】：

【解决方案3】：

为了获得良好的实践，您需要使用 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();

【讨论】：

【解决方案4】：

只有一种正确的方法可以找到选定的选项 - 通过 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>

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

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

的结果

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

【讨论】：

【解决方案5】：

试试这个代码：)

获取价值：

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

获取文本：

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

【讨论】：

我们相信哪一个？ 's' 在 ostans 或 'ha' 在 shahrha？ :D

【解决方案6】：

试试

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>

【讨论】：

这个 vanilla js，专门针对 jQuery 解决方案提出的问题。

【解决方案7】：

用于获取所选标签的值：

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

如果你想得到 text 使用这个代码：

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

【讨论】：

【解决方案8】：

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

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

【讨论】：

【解决方案9】：

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

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

【讨论】：

var selectedaioConceptName = $('#aioConceptName option:selected').val(); 比使用另一个 find() 更好

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

我遇到了同样的问题，但我明白了为什么它不适用于我的案例
html页面被分成不同的html片段，我发现我有另一个带有select的相同Id的输入字段，导致val()总是为空
我希望这可以为遇到类似问题的人节省一天的时间。

【讨论】：

确实，这让我意识到了自己的问题。我自己在数据目标中使用 qty-field，在 id 本身中使用.. qty_field。始终检查基础知识两次或更多次。

【解决方案12】：

直截了当，非常简单：

你的下拉菜单

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

【讨论】：

【解决方案13】：

你应该使用这个语法：

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

所以试试这个代码：

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

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

在this post查看这个答案

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

你可以尝试这样调试：

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

【讨论】：

【解决方案16】：

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

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

虽然下面会给您带来价值。

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

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

【讨论】：

你是对的；但是，他与文本有关，问题是错误的。

【解决方案19】：

在这种情况下，您最好的选择可能是使用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

});

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

希望有帮助！

【讨论】：

【解决方案20】：

试试这个

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

【讨论】：

【解决方案21】：

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

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

如何更新禁用的选择？

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

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

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

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

【讨论】：

当使用多选下拉菜单时，它只会得到第一个值

【解决方案22】：

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

【讨论】：

完美无瑕！只是不要忘记你应该在末尾添加$(this).find('option:selected').val() 来获取选项元素的值，或者$(this).find('option:selected').text() 来获取文本。 :)

【解决方案23】：

如果你想获取 'value' 属性而不是文本节点，这对你有用：

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

【讨论】：

这只是部分解决方案-还需要为每个选项设置值-雅各布瓦莱塔的回答已经涵盖了这一点

【解决方案24】：

为每个选项设置值

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

【讨论】：

警告：如果未选择任何选项，$('#aioConceptName').val() 将返回 null/"undefined"
这向我保证 $('#myselect').val() 是正确的，我只是愚蠢地忘记给选择一个 id！
我的选择之一是一个特殊的prompt 选项<option>Please select an option</option>。在我的情况下，添加空白值属性<option value="">Please...</option> 不是问题，但我相信在某些情况下没有值属性是有意义的。但是 +1 因为你的伏都教措辞让我笑了。
val()不是选择value而不是option里面的文字吗？ IE。它选择1 而不是roma。
@deathlock 这就是.val() 的全部意义所在。如果您希望操作/使用文本，请使用$(":selected).text() 或将值和文本设置为相同。

【解决方案25】：

对选择元素也使用jQuery.val() 函数：

.val() 方法主要用于获取表单元素的值例如输入、选择和文本区域。在选择元素的情况下，它返回 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>

【讨论】：

【解决方案26】：

这应该可以工作：

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

【讨论】：

【解决方案27】：

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

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

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

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

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

【讨论】：

【解决方案28】：

对于任何发现最佳答案无效的人。

尝试使用：

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

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

【讨论】：

【解决方案29】：

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

【讨论】：

这是最好的答案，希望有一种方法可以在堆栈溢出时请求在顶部显示正确的答案。

【解决方案30】：

您是否考虑过使用普通的旧 javascript？

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

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

另见Getting an option text/value with JavaScript

【讨论】：

˗1 没有足够的 jQuery