Html 如何获取选择框中所有值的列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18113495/
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
How can I get a list of all values in select box?
提问by bestfriendkumar
I am stumped. I have a form with a dropdown list, and I would like to grab a list of all the values in the list. I pulled the below example from w3 schools (yes, I know it's unreliable, but other solutions on stack overflow seem to be very similar to this). It was not working for me, and I tried plugging it into jsfiddle, but no luck.
我难住了。我有一个带有下拉列表的表单，我想获取列表中所有值的列表。我从 w3 学校中提取了以下示例（是的，我知道它不可靠，但堆栈溢出的其他解决方案似乎与此非常相似）。它对我不起作用，我尝试将其插入 jsfiddle，但没有成功。
HTML:
<form>Select your favorite fruit:
<select id="mySelect">
<option value="a">Apple</option>
<option value="o">Orange</option>
<option value="p">Pineapple</option>
<option value="b">Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">Display text of all options</button>
javascript:
javascript:
function displayResult() {
var x = document.getElementById("mySelect");
var txt = "All options: ";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + "\n" + x.options[i].value;
}
alert(txt);
}
Not working on jsfiddle: http://jsfiddle.net/WfBRr/1/
不适用于 jsfiddle：http: //jsfiddle.net/WfBRr/1/
However, it works at their site: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2
但是，它在他们的网站上工作：http: //www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2
Any ideas on how to solve this?
关于如何解决这个问题的任何想法？
回答by Abraham P
You had two problems:
你有两个问题：
1) The order in which you included the HTML. Try changing the dropdown from "onLoad" to "no wrap - head" in the JavaScript settings of your fiddle.
1) 您包含 HTML 的顺序。尝试在小提琴的 JavaScript 设置中将下拉列表从“onLoad”更改为“no wrap - head”。
2) Your function prints the values. What you're actually after is the text
2）您的函数打印值。你真正追求的是文本
x.options[i].text;instead of x.options[i].value;
x.options[i].text;而不是x.options[i].value;
回答by alfasin
Change:
改变：
x.length
to:
到：
x.options.length
Link to fiddle
链接到小提琴
And I agree with Abraham - you might want to use textinstead of value
我同意亚伯拉罕 - 你可能想要使用text而不是value
Update
The reason your fiddle didn't work was because you chose the option: "onLoad" instead of: "No wrap - in "
更新
您的小提琴不起作用的原因是因为您选择了选项：“onLoad”而不是：“No wrap - in”
回答by Dorjee Karma
As per the DOM structure you can use below code:
根据 DOM 结构，您可以使用以下代码：
var x = document.getElementById('mySelect');
var txt = "";
var val = "";
for (var i = 0; i < x.length; i++) {
txt +=x[i].text + ",";
val +=x[i].value + ",";
}
回答by Fuzzley
It looks like placing the click event directly on the button is causing the problem. For some reason it can't find the function. Not sure why...
看起来将点击事件直接放在按钮上是导致问题的原因。由于某种原因，它找不到该功能。不知道为什么...
If you attach the event handler in the javascript, it does work however.
如果您在 javascript 中附加事件处理程序，它确实可以工作。
See it here: http://jsfiddle.net/WfBRr/7/
在这里看到它：http: //jsfiddle.net/WfBRr/7/
<button id="display-text" type="button">Display text of all options</button>
document.getElementById('display-text').onclick = function () {
var x = document.getElementById("mySelect");
var txt = "All options: ";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + "\n" + x.options[i].value;
}
alert(txt);
}
