Материализация - Как динамически выбирать опции в множественном выборе?

Question

У меня есть элемент множественного выбора, и я хотел бы динамически выбирать комбинацию опций, например, так:

Я могу динамически выбирать выберите один вариант, но это все,

document.getElementById('update_days_of_the_week').selectedIndex = 2;
document.getElementById('update_days_of_the_week').selectedIndex = 3;

<div class="row">
  <div class="input-field col s4">
    <select id="update_days_of_the_week" multiple>
      <option value="" disabled selected>Choose your days of the week</option>
      <option value="Monday">Monday</option>
      <option value="Tuesday">Tuesday</option>
      <option value="Wednesday">Wednesday</option>
      <option value="Thursday">Thursday</option>
      <option value="Friday">Friday</option>
      <option value="Saturday">Saturday</option>
      <option value="Sunday">Sunday</option>
    </select>
    <label>Days of the week</label>
  </div>
</div>

Приведенный выше код, очевидно, выбирает только индекс 3 при замене selectedIndex = 2.

Answer 1

Используя jQuery, вы можете сделать что-то вроде этого:

$('#update_days_of_the_week').val(['Monday', 'Friday'])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<select id="update_days_of_the_week" multiple>
  <option value="" disabled selected>Choose your days of the week</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

Answer 2

Попробуйте использовать метод setAttribute() вместо selectedIndex, который принимает только одно значение.

document.addEventListener('DOMContentLoaded', function(){
    const instance = M.FormSelect.init(document.querySelector('select'))
});

const elSelect = document.getElementById('update_days_of_the_week')

/*
 * With the disabled option in "elOptions"
 */
const elOptions = elSelect.querySelectorAll('option')
// Unselect the "Choose your days of the week" option
elOptions[0].removeAttribute('selected')
// Select the wanted options
elOptions[2].setAttribute('selected', 'selected') // Tuesday
elOptions[3].setAttribute('selected', 'selected') // Wednesday

/*
 * Without the disabled option in "elOptions"
 */
// const elOptions = elSelect.querySelectorAll('option:not([disabled]')
// elOptions[1].setAttribute('selected', 'selected') // Tuesday
// elOptions[2].setAttribute('selected', 'selected') // Wednesday

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="input-field col s4">
    <form>
      <label>Days of the week</label>
      <select id="update_days_of_the_week" multiple>
        <option value="" disabled selected>Choose your days of the week</option>
        <option value="Monday">Monday</option>
        <option value="Tuesday">Tuesday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Thursday">Thursday</option>
        <option value="Friday">Friday</option>
        <option value="Saturday">Saturday</option>
        <option value="Sunday">Sunday</option>
      </select>
    </form>
  </div>
</div>