Установите значение выпадающего выбора с помощью Materialize.css 1.0.0 без jQuery

Question

В моем проекте я сохраняю значения выбранных элементов и устанавливаю их при загрузке страницы в соответствии с последним выбранным пользователем. Раньше это работало, просто устанавливая .value = "x" но теперь я не могу установить значения, я могу получить их только с instance.getSelectedValues(); согласно материализации документов?

const selectedCategory = document.querySelector('#category');
const materializeSelectedCategory = M.FormSelect.init(selectedCategory);

... тогда на документ готов

materializeSelectedCategory.value = "SET VALUE"; // This does not work...

Не могу понять, как установить значения раскрывающихся списков Materialize.css. Я использую несколько.

Я не использую JQuery.

Answer 1

Не могу понять, как установить значения раскрывающихся списков Materialize.css. materializeSelectedCategory.value = "SET VALUE"; // Это не работает...

Вам нужно использовать selectedCategory и событие отправки рассылки:

selectedCategory.value = "1";
if (typeof(Event) === 'function') {
    var event = new Event('change');
} else {  // for IE11
    var event = document.createEvent('Event');
    event.initEvent('change', true, true);
}
selectedCategory.dispatchEvent(event);

const selectedCategory = document.querySelector('#category');
const materializeSelectedCategory = M.FormSelect.init(selectedCategory);

selectedCategory.value = "1";
if(typeof(Event) === 'function') {
    var event = new Event('change');
}else{
    var event = document.createEvent('Event');
    event.initEvent('change', true, true);
}
selectedCategory.dispatchEvent(event);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<div class="input-field col s12">
    <select id="category">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>

Answer 2

Повторная инициализация компонента

Альтернативный вариант отправки changeсобытие на основе HTMLSelectElementпросто повторно инициализирует компонент после установки value. Вы должны делать это каждый раз, когда значение изменяется программно, а не взаимодействием с пользователем (т. initметод быстрый, хотя):