Материализация, как изменить второй вариант выбора зависит от первого?

Question

Я использую материализовать, и проблема в том, что у меня есть 2 select-div с опциями, и когда я выбираю Ukranine в первом select? Второй выбор покажет мне только Львов, Одесса, Киев, Харьков. Если я выберу Польшу в первом выборе, второй выбор покажет мне только Варшаву и Краков. Я уже задавал тот же вопрос и получил несколько ответов, которые были полезны, но когда я связал материализовать css, код не работает.

<div class="input-field col s12">
    <select id="country-list" onchange="changeCountry(this)">
        <option value="none" disabled selected>Choose your option</option>
        <option value="1">Ukraine </option>
        <option value="2">Poland</option>
    </select>
</div>

<div class="input-field col s12">
    <select id="city-list">
        <option value="none" disabled selected>Choose your option</option>
        <option value="1">Lviv</option>
        <option value="1">Kiev</option>
        <option value="1">Kharkiv</option>
        <option value="1">Odessa</option>
        <option value="2">Krakow</option>
        <option value="2">Warsaw</option>
    </select>
</div>

А здесь javascript

var countryObject = {
    Ukraine: ["Lviv", "Kiev", "Kharkiv", "Odessa"],
    Poland: ["Krakow", "Warsaw"],
};

function changeCountry() {
    document.getElementById("city-list").options.length = 0;

    var cityListArray =
        countryObject[document.getElementById("country-list").value];
    console.log(document.getElementById("city-list").options);

    for (var item = 0; item < cityListArray.length; item++) {
        document.getElementById("city-list").options[
            document.getElementById("city-list").options.length
        ] = new Option(cityListArray[item], cityListArray[item]);
    }
}

Answer 1

Нет необходимости постоянно находить элементы на странице. Найдите их один раз и используйте полученный элемент позже, когда это необходимо.

const countryObject = {
	Ukraine: ["Lviv", "Kiev", "Kharkiv", "Odessa"],
	Poland: ["Krakow", "Warsaw"],
};

const countryListEl = document.getElementById("country-list");
const cityListEl = document.getElementById("city-list");
const defaultOption = new Option("Choose your option");
defaultOption.disabled = true;
defaultOption.selected = true;

function changeCountry() {
	cityListEl.options.length = 0;
	cityListEl.options[0] = defaultOption;

	const cityListArray = countryObject[countryListEl.value];

	for (let i = 0; i < cityListArray.length; i++) {
		cityListEl.options[i + 1] = new Option(
			cityListArray[i],
			cityListArray[i]
		);
	}
}

<div class="input-field col s12">
    <select id="country-list" onchange="changeCountry(this)">
        <option value="none" disabled selected>Choose your option</option>
        <option value="Ukraine">Ukraine </option>
        <option value="Poland">Poland</option>
    </select>
</div>

<div class="input-field col s12">
    <select id="city-list">
        <option value="none" disabled selected>Choose your option</option>
    </select>
</div>