如何使用 JavaScript 设置多选的值

Question

要使用 JavaScript 设置 <input> 元素的数据，我们分配该元素的值和名称，如下所示：

 var form = document.createElement("form");
var element = document.createElement("input");
element.value=value;
element.name=name;

在 <select> 存在 multiple 属性的情况下，如何设置该选择元素的值？例如，我将如何设置 myselect 元素的值如下：

 <form method="post" action="/post/" name="myform">
  <select multiple name="myselect" id="myselect">
    <option value="1">option1</option>
    <option value="2">option2</option>
        ...

我试图通过这样做来设置值 myselect.value=[1,2] 但是它不起作用。选择 option1 和 option2 我预计它会返回 [1,2] ，但它只返回“1”。

原文由 eggandegg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要以编程方式在多选上设置多个值选项，您需要手动将 selected 属性添加到要选择的 <option> 元素。

一种方法如下：

 const select = document.getElementById('myselect')
const selectValues = [1, 2];

/* Iterate options of select element */
for (const option of document.querySelectorAll('#myselect option')) {

  /* Parse value to integer */
  const value = Number.parseInt(option.value);

  /* If option value contained in values, set selected attribute */
  if (selectValues.indexOf(value) !== -1) {
    option.setAttribute('selected', 'selected');
  }
  /* Otherwise ensure no selected attribute on option */
  else {
    option.removeAttribute('selected');
  }
}

 <select multiple name="myselect" id="myselect">
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
</select>

---

原文由 Dacre Denny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有用

 var element = document.getElementById('selectMultiple');

// Set Values
var values = ["Gold", "Bronze"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

// Get Value
var selectedItens = Array.from(element.selectedOptions)
        .map(option => option.value)

spanSelectedItens.innerHTML = selectedItens

 <select name='selectMultiple' id="selectMultiple" multiple>
    <option value="Gold">Gold</option>
    <option value="Silver">Silver</option>
    <option value="Bronze">Bronze</option>
</select>
<br />
Selected: <span id="spanSelectedItens"></span>

原文由 Leonardo Cardoso Junior 发布，翻译遵循 CC BY-SA 4.0 许可协议