时间戳

首页 > 解决方案 > 如何使用 JavaScript 设置多项选择的值

javascript - 如何使用 JavaScript 设置多项选择的值

问题描述

为了<input>使用 JavaScript 设置元素的数据，我们像这样分配该元素的值和名称：

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

标签： javascripthtmlhtml-select

解决方案

要以编程方式在多选中设置多个值选项，您需要手动向要选择的元素添加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>

推荐阅读