Materialize-如何在多项选择中动态选择选项？

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()方法代替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') // example 2
elOptions[3].setAttribute('selected', 'selected') // example 3

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