Question

我们想使用HTML5 select输入来返回值数组，例如此select输入

<select id="fruits" multiple>
   <option value="oranges">Oranges</option>
   <option value="apples" selected>Apples</option>
   <option value="grapes" selected>Grapes</option>
</select>

当我们尝试使用来获取值

fruits = fruits.value // this produces only 'apples'

为什么只有苹果？我们如何从选择输入中获取值以返回水果（值）的数组？

谢谢！

btw-在下面的小提琴中可以看到： https://jsfiddle.net/eaby035z/

此外，我们如何才能做到这一点？！

var favorites = ['apples','oranges'];
fruits.value = favorites // doesn't work...

Answer 1

一种可能的解决方案是：

首先，您需要选择所有选项并进行遍历。

选项将是一个HTMLCollection，您可以使用for循环（以及其他方法）进行迭代，并且在for循环内可以获取值。见下文

要将它们放入数组中，只需将它们推入一个空数组中即可。

const select = document.getElementById("select")
const options = select.options
const fruits = [];
for ( let i=0; i< options.length; i++) {
	fruits.push(options[i].value)
}
console.log(fruits)

<select id="select" multiple>
   <option value="oranges">Oranges</option>
   <option value="apples" selected>Apples</option>
   <option value="grapes" selected>Grapes</option>
</select>

另一种解决方案是在选项HTML集合上使用map数组方法。 map返回一个数组。（就像您对问题的评论中提到的haim770一样）

const select = document.getElementById("select")
const options = select.options
fruitArray = Array.prototype.map.call(options, option => option.value )

console.log(fruitArray)

<select id="select" multiple>
   <option value="oranges">Oranges</option>
   <option value="apples" selected>Apples</option>
   <option value="grapes" selected>Grapes</option>
</select>

在您编辑完问题后，询问如何为选项设置一些值

const favorites = ['value1','value2', 'value3'];
const select = document.getElementById("select")
const options = select.options
for ( let i=0; i< options.length; i++) {
	options[i].value = favorites[i]
  options[i].innerText = favorites[i]
}

<select id="select" multiple>
   <option value="oranges">Oranges</option>
   <option value="apples" selected>Apples</option>
   <option value="grapes" selected>Grapes</option>
</select>

Answer 2

您可以使用JQUERY轻松地做到这一点。希望对您有帮助

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" multiple onChange="onSelectChange()">
   <option value="oranges">Oranges</option>
   <option value="apples" selected>Apples</option>
   <option value="grapes" selected>Grapes</option>
   <option value="mango" >mango</option>
</select>

<button onClick="setOptions()" >Set Programatically</button>

get current svn revision
print log
take all fields & use as input to git commit |
pass committer id through sha1sum first
git commit
revision = current revision -1

Answer 3

遍历select选项，并在selected为true时获得所有选项。

const select = document.getElementById("select")
const options = select.options
const fruits = [];
for (let i = 0; i < options.length; i++) {
  if (options[i].selected == true) {
    console.log(options[i].value)
  }
}

<select id="select" multiple>
  <option value="oranges">Oranges</option>
  <option value="apples" selected>Apples</option>
  <option value="grapes" selected>Grapes</option>
</select>

HTML5选择要数组的多个值

此外，我们如何才能做到这一点？！

3 个答案: