Используйте javascript, чтобы изменить второй список выбора на основе первого варианта списка выбора?

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>

Как я могу сделать это с javascript, когда я выбираю Укранине в первом выборе? Второй выбор покажет мне только Львов, Одесса, Киев, Харьков. Если я выберу Польшу в первом выборе, второй выбор покажет мне только Варшаву и Краков.

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>

Это сработает для вас? Я изменил значение на число, которое было в вашем коде.