jQuery 从选择元素中获取所选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2380230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get selected option from select element
提问by Matt
I am trying to get the selected option from a dropdown and populate another item with that text, as follows. IE is barking up a storm and it doesn't work in Firefox:
我正在尝试从下拉列表中获取所选选项并使用该文本填充另一个项目，如下所示。IE 正在掀起风暴，它在 Firefox 中不起作用：
$('#ddlCodes').change(function() {
$('#txtEntry2').text('#ddlCodes option:selected').text();
});
What am I doing wrong?
我究竟做错了什么？
回答by Nick Craver
Here's a short version:
这是一个简短的版本：
$('#ddlCodes').change(function() {
$('#txtEntry2').text($(this).find(":selected").text());
});
karim79made a good catch, judging by your element name txtEntry2may be a textbox, if it's any kind of input, you'll need to use .val()instead or .text()like this:
karim79做得很好，根据你的元素名称判断txtEntry2可能是一个文本框，如果它是任何类型的输入，你需要使用.val()代替或.text()像这样：
$('#txtEntry2').val($(this).find(":selected").text());
For the "what's wrong?" part of the question: .text()doesn't take a selector, it takes text you want it set to, or nothing to return the text already there. So you need to fetch the text you want, then put it in the .text(string)method on the object you want to set, like I have above.
对于“怎么了？” 问题的一部分：.text()不带选择器，它需要你想要设置的文本，或者什么都不返回已经存在的文本。所以你需要获取你想要的文本，然后把它放在.text(string)你想要设置的对象的方法中，就像我上面那样。
回答by Pointy
Try this:
尝试这个：
$('#ddlCodes').change(function() {
var option = this.options[this.selectedIndex];
$('#txtEntry2').text($(option).text());
});
回答by ThdK
Here is a shorter version that should also work:
这是一个较短的版本，也应该可以工作：
$('#ddlCodes').change(function() {
$('#txtEntry2').text(this.val());
});
回答by koppor
With less jQuery:
使用更少的 jQuery：
<select name="ddlCodes"
onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">
this.options[this.selectedIndex].valueis plain JavaScript.
this.options[this.selectedIndex].value是纯 JavaScript。
(Source: German SelfHTML)
（来源：德国 SelfHTML）
回答by ketan
Try following code
试试下面的代码
$('#ddlCodes').change(function() {
$('#txtEntry2').val( $('#ddlCodes :selected').text() );
});
回答by Sandeep Kumar
To know number of selected elements use
要知道所选元素的数量，请使用
$("select option:selected").length
To Get the value of all selected elements use
要获取所有选定元素的值，请使用
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
回答by HappyCoder
The first part is to get the element from the drop down menu which may look like this:
第一部分是从下拉菜单中获取元素，它可能如下所示：
<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>
<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>
To capture via jQuery you can do something like so:
要通过 jQuery 捕获，您可以执行以下操作：
$('#cycles_list').change(function() { var mylist = document.getElementById("cycles_list"); iterations = mylist.options[mylist.selectedIndex].text; });
$('#cycles_list').change(function() { var mylist = document.getElementById("cycles_list"); iterations = mylist.options[mylist.selectedIndex].text; });
Once you have stored the value in your variable, the next step would be to send the information stored in the variable to the form field or HTML element of your choosing. It may be a div p or custom element.
将值存储在变量中后，下一步就是将存储在变量中的信息发送到您选择的表单字段或 HTML 元素。它可能是一个 div p 或自定义元素。
i.e.
<p></p> OR <div></div>
IE
<p></p> OR <div></div>
You would use:
你会使用：
$('p').html(iterations); OR $('div').html(iterations);
$('p').html(迭代次数); 或 $('div').html(iterations);
If you wish to populate a text field such as:
如果您希望填充文本字段，例如：
<input type="text" name="textform" id="textform"></input>
<input type="text" name="textform" id="textform"></input>
You would use:
你会使用：
$('#textform').text = iterations;
$('#textform').text = 迭代；
Of course you can do all of the above in less steps, I just believe it helps people to learn when you break it all down into easy to understand steps... Hope this helps!
当然，您可以用更少的步骤完成上述所有操作，我只是相信当您将其分解为易于理解的步骤时，它可以帮助人们学习......希望这会有所帮助！
回答by alejandro
Using the selectedOptions property (HTML5) you can get the selected option(s)
使用 selectedOptions 属性（HTML5），您可以获得选定的选项
document.getElementbyId("id").selectedOptions;
With JQuery can be achieved by doing this
用JQuery可以通过这样做来实现
$("#id")[0].selectedOptions;
or
或者
$("#id").prop("selectedOptions");
The property contains an HTMLCollection array similitar to this one selected option
该属性包含一个类似于此选定选项的 HTMLCollection 数组
[<option value=?"1">?ABC</option>]
or multiple selections
或多项选择
[<option value=?"1">?ABC</option>, <option value=?"2">?DEF</option> ...]
回答by Mpho Makhubele
This worked for me:
这对我有用：
$("#SelectedCountryId_option_selected")[0].textContent
回答by Amit Dash
The above would very well work, but it seems you have missed the jQuery typecast for the dropdown text. Other than that it would be advisable to use .val()to set text for an input text type element. With these changes the code would look like the following:
以上将非常有效，但您似乎错过了下拉文本的 jQuery 类型转换。除此之外，建议使用.val()为输入文本类型元素设置文本。通过这些更改，代码将如下所示：
$('#txtEntry2').val($('#ddlCodes option:selected').text());
