使用 javascript 根據第一個 select 列表選項更改第二個 select 列表？

Question

我有兩個選擇：

<div class="input-field col s12">
          <select id="country-list" >
            <option value="none" disabled selected>Choose your option</option>
            <option value="1">Ukraine </option>
            <option value="2">Poland</option>
            <option value="3">Russia</option>
          </select>
       </div>
<div class="input-field col s12">
              <select class="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>

當我在第一個 select 中選擇烏克蘭時，我該怎么做 javascript？ 第二個 select 將只顯示利沃夫、敖德薩、基輔、哈爾科夫。 如果我在第一個 select 中選擇波蘭，第二個 select 將只顯示華沙和克拉科夫。

Answer 1

 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]); } }

 <div class="input-field col s12"> <select id="country-list" onchange="changeCountry()"> <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> <option value="Lviv">Lviv</option> <option value="Kiev">Kiev</option> <option value="Kharkiv">Kharkiv</option> <option value="Odessa">Odessa</option> <option value="Krakow">Krakow</option> <option value="Warsaw">Warsaw</option> </select> </div>

它會為你工作嗎？

Answer 2

 var countryObject = { "Ukraine": ["Lviv","Kiev","Kharkiv","Odessa"], "Poland":["Krakow","Warsaw"] } function changeCountry(el){ document.getElementById("city-list").options.length = 0; var cityListArray = countryObject[el.options[el.selectedIndex].text]; console.log(el.options[el.selectedIndex].text); 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]); } }

 <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>

它會為你工作嗎？ 我已將值修改為代碼中的數字。