Use javascript to change a second select list based on the first select list option?

Question

I have two selects:

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

How can i do it wih javascript,when I choose Ukranine in the first select? The second select would show me only Lviv, Odessa, Kiev,kharkiv. If I choose Poland in the first select, the second select would show me only Warsaw and Krakow.

Here is a solution https://stackoverflow.com/questions/4480637/how-to-change-a-selections-options-based-on-another-select-option-selected — tapu74, Apr 17 '20 at 09:11

score 1 · Answer 1 · answered Apr 17 '20 at 09:23

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>

Is it going to work for you?

score 0 · Accepted Answer · answered Apr 17 '20 at 09:30

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>

Is it going to work for you? I have modified the value to the number as it was in your code.

Can you please run the code snippet from here and tell me it is what you are looking for or not? — Batman, Apr 17 '20 at 09:48
If i change the city name,it show me,but i still see Polish city in the list — Rostek, Apr 17 '20 at 09:48
Just change the countryObject object according to your need. I put ("Lviv","Kiev","Kharkiv","Odessa") cities under Ukraine and ("Krakow","Warsaw") cities under Poland. Can you please change it and see whether it is working or not? — Batman, Apr 17 '20 at 09:52
Oh happy to hear that @Rostek :) Is it working according to your need right? — Batman, Apr 17 '20 at 09:56

Use javascript to change a second select list based on the first select list option?

2 Answers2