Как установить значения множественного выбора с помощью JavaScript

Question

Чтобы установить данные элемента <input> с помощью JavaScript, мы присваиваем значение и имя этого элемента следующим образом:

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

В случае <select>, где присутствует атрибут multiple, как мне установить значение этого элемента select? Например, как бы я установить значение элемента 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".

Answer 1

Работает

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>

Answer 2

Чтобы программно установить несколько вариантов значений для множественного выбора, необходимо вручную добавить атрибуты 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>

---

Answer 3

Вы можете получить доступ к массиву опций выбора через свойство options объекта select.Каждый параметр имеет свойство selected, которое можно установить.

document.myform.myselect.options[0].selected = true;

Доступ к параметрам можно получить по значению с помощью селектора запросов:

document.myform.myselect.querySelector("option[value="+value+"]")[0].selected = true;