[英]Materialize how to change second select option depended from the first?
I use materialize, and the problem is: I have 2 select-div with options, and when I choose Ukraine in the first select?我使用materialize,问题是:我有2个带选项的select-div,当我在第一个select中选择乌克兰时? The second select would show me only Lviv, Odessa, Kiev, kharkiv.
第二个 select 将只显示利沃夫、敖德萨、基辅、哈尔科夫。 If I choose Poland in the first select, the second select would show me only Warsaw and Krakow.
如果我在第一个 select 中选择波兰,第二个 select 将只显示华沙和克拉科夫。
I've already asked the same question, and received few answers which was useful, but when I linked materialize CSS, code doesn't work.我已经问过同样的问题,并且收到了一些有用的答案,但是当我链接具体化 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>
And here JavaScript在这里 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]);
}
}
There is no need to continuously find the elements on the page.无需在页面上不断查找元素。 Find them once, and use the resulting element later when needed.
找到它们一次,然后在需要时使用结果元素。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.