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

Question

I have two <select/>s:

<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 with 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 · edited Oct 12 '22 at 00:31

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 · edited Oct 12 '22 at 00:31

0

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.

edited Oct 12 '22 at 00:31

Alexander Nied

12,804
4
25
45

answered Apr 17 '20 at 09:30

Batman

480
2
8

I copied it,and it doesn't wonrk – Rostek Apr 17 '20 at 09:36
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

Linked

Related