如何获取选择框中所有值的列表？

Question

我被难住了。我有一个带有下拉列表的表单，我想获取列表中所有值的列表。我从 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:

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

不适用于 jsfiddle：http://jsfiddle.net/WfBRr/1/

但是，它在他们的网站上有效： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2

关于如何解决这个问题有什么想法吗？

Answer 1

您有两个问题：

1) 包含 HTML 的顺序。尝试在小提琴的 JavaScript 设置中将下拉菜单从“onLoad”更改为“no wrap - head”。

2) 您的函数会打印这些值。你真正想要的是文字

x.options[i].text;

而不是

x.options[i].value

；

http://jsfiddle.net/WfBRr/5/

Answer 2

示例：

<select name="sel1" id="sel1">
    <option value="001">option 001</option>
    <option value="002">option 002</option>
    <option value="003">option 003</option>
    <option value="004">option 004</option>
</select>

价值观：

let selectElement = document.querySelector('[name=sel1]');
let optionValues = [...selectElement.options].map(o => o.value)

选项文字

let selectElement = document.querySelectorAll('[name=sel1]');
let optionNames = [...selectElement.options].map(o => o.text)

Answer 3

改变：

x.length

至：

x.options.length

链接到小提琴

我同意亚伯拉罕的观点 - 你可能想使用

text

而不是

value

更新
你的小提琴不起作用的原因是因为你选择了选项：“onLoad”而不是：“无换行 - in”

Answer 4

根据 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 + ",";
      }

Answer 5

基于@Marek Lisiecki，我制作了一个演示来回答这个问题，如下所示。

我认为这是使用 ES6 更好的方法

function displayResult(){
  let selectElement = document.getElementById('mySelect');
  let optionNames = [...selectElement.options].map(o => o.text);
  console.log(optionNames);
}

function displayResult(){
  let selectElement = document.getElementById('mySelect');
  let optionNames = [...selectElement.options].map(o => o.text);
  console.log(optionNames);
}

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

Answer 6

看起来将点击事件直接放在按钮上会导致问题。由于某种原因，它找不到该功能。不知道为什么...

如果您在 JavaScript 中附加事件处理程序，它确实可以工作。

在这里查看：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);
}

Answer 7

解决方案

基于 Marek 的答案，最容易理解的方法可能是使用以下方法。

function displayResult(){
  let optionNames = Array.from(document.getElementById('mySelect').options).map(option => option.text);
  console.log(optionNames);
}

说明

首先，使用

document.getElementById('mySelect')

，我们获得

select

元素。

然后，使用

.options

，我们获得一个包含所有选项的

HTMLOptionsCollection

对象。

然后，使用

Array.from()

，我们获得一个包含所有选项的

array

对象。

最后，使用

.map(option => option.text)

，我们创建一个新数组，其中包含所有选项的显示文本。

在最后一步中，我们使用

map()

方法 创建一个新数组，其中包含选项数组中选项的显示文本。该方法迭代选项数组中的所有元素 (

HTMLoptions

)，并为每个数组元素执行提供的函数 (

option => option.text

)。

map()

方法类似于

forEach()

方法，因为它也迭代给定数组中的所有元素。但是，

map()

方法还将提供的函数获得的结果保存到新创建的数组中。提供的函数是一个 箭头函数，它接受参数

option

（这是选项数组中的

HTMLoption

元素）并返回选项的显示文本 (

option.text

)。

代码片段

function displayResult(){
  let optionNames = Array.from(document.getElementById('mySelect').options).map(option => option.text)
  console.log(optionNames);
}

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