从选择元素中获取选定的选项

Posted 2023-03-05

【中文标题】从选择元素中获取选定的选项

【英文标题】：Get selected option from select element

【发布时间】：2011-01-23 17:26:21

【问题描述】：

我正在尝试从下拉列表中获取所选选项并使用该文本填充另一个项目，如下所示。 IE掀起了一场风暴，它在Firefox中不起作用：

$('#ddlCodes').change(function() 
  $('#txtEntry2').text('#ddlCodes option:selected').text();
);

我做错了什么？

【参考方案1】：

鉴于此 html：

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

根据 jQuery v1.6+ 的描述选择：

var text1 = 'Two';
$("select option").filter(function() 
    //may want to use $.trim in here
    return $(this).text() == text1; 
).prop('selected', true);

【参考方案2】：

如果你已经有了这个并使用 jquery，这将是你的答案：

$($(this)[0].selectedOptions[0]).text()

【参考方案3】：

上面的方法很好用，但您似乎错过了下拉文本的 jQuery 类型转换。除此之外，建议使用.val() 为输入文本类型元素设置文本。通过这些更改，代码将如下所示：

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

【参考方案4】：

使用 selectedOptions 属性 (HTML5) 您可以获得选定的选项

document.getElementbyId("id").selectedOptions; 

用JQuery可以做到这一点

$("#id")[0].selectedOptions; 

或

$("#id").prop("selectedOptions");

该属性包含一个与此类似的 HTMLCollection 数组 一个选定的选项

[<option value=​"1">​ABC</option>]

或多选

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

【参考方案5】：

第一部分是从下拉菜单中获取元素，可能如下所示：

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

要通过 jQuery 捕获，您可以执行以下操作：

$('#cycles_list').change(function() 
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
);

一旦您将值存储在变量中，下一步就是将存储在变量中的信息发送到您选择的表单字段或 HTML 元素。它可以是 div p 或自定义元素。

即<p></p> OR <div></div>

你会使用：

$('p').html(迭代);或 $('div').html(iterations);

如果您希望填充文本字段，例如：

<input type="text" name="textform" id="textform"></input>

你会使用：

$('#textform').text = 迭代次数；

当然，您可以通过更少的步骤完成上述所有操作，我只是相信，当您将所有内容分解为易于理解的步骤时，它会帮助人们学习...希望这会有所帮助！

【参考方案6】：

要知道所选元素的数量使用

$("select option:selected").length

要获取所有选定元素的值，请使用

    var str = "";
  $("select option:selected").each(function () 
        str += $(this).text() + " ";
      );

【参考方案7】：

试试下面的代码

$('#ddlCodes').change(function() 
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
);

【参考方案8】：

这对我有用：

$("#SelectedCountryId_option_selected")[0].textContent

【参考方案9】：

使用更少的 jQuery：

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value 是纯 javascript。

（来源：German SelfHTML）

【参考方案10】：

这是一个较短的版本，也应该可以工作：

 $('#ddlCodes').change(function() 
      $('#txtEntry2').text(this.val());
    );

【讨论】：

Uncaught TypeError: Object # has no method 'val'

this.value 会修复它。

【参考方案11】：

这是一个简短的版本：

$('#ddlCodes').change(function() 
  $('#txtEntry2').text($(this).find(":selected").text());
);

karim79 做得很好，根据您的元素名称判断，txtEntry2 可能是一个文本框，如果是任何类型的输入，您需要使用 .val() 或 .text()，如下所示：

  $('#txtEntry2').val($(this).find(":selected").text());

对于“怎么了？”问题的一部分：.text() 没有选择器，它需要你想要设置的文本，或者什么都不返回已经存在的文本。所以你需要获取你想要的文本，然后把它放在你想要设置的对象的.text(string) 方法中，就像我上面那样。

【讨论】：

如果txtEntry2是文本输入，OP需要使用val()代替。

@karim79 - 好点，它可能是元素名称，正在更新。

是的，通过将 .text 更改为 .val 并以不同的方式获取文本，一切都解决了。谢谢各位

【参考方案12】：

试试这个：

$('#ddlCodes').change(function() 
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
);