javascript,获取选择框中所有值的列表

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.querySelector('[name=sel1]');
let optionNames = [...selectElement.options].map(o => o.text)

<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.querySelector('[name=sel1]');
let optionNames = [...selectElement.options].map(o => o.text)

Answer 3

更改:

x.length

至:

x.options.length

链接到小提琴

我同意亚伯拉罕 - 你可能想用text而不是value

更新
您的小提琴不起作用的原因是因为您选择了选项:"onLoad"而不是:"No wrap-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);
}

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