Update a select based on the values of other select

<script>

  function updateCities(country){

    var cities;

    if (country == 'Japan'){

      cities = ['Tokyo', 'Osaka', 'Kyoto'];

    } else if (country == 'USA'){

      cities = ['New York', 'Los Angeles', 'Chicago'];

    } else if (country == 'Australia'){

      cities = ['Sydney', 'Melbourne', 'Brisbane'];

    }

    

    // clear current city values

    document.getElementById('city').innerHTML = '';

        document.getElementById('city2').innerHTML = '';

    

    // add new city values

    for (var i = 0; i < cities.length; i++){

      var opt = document.createElement('option'); 

      opt.innerHTML = cities[i];

      opt.value = cities[i];

      document.getElementById('city').appendChild(opt);

    

    //

     var opt = document.createElement('option'); 

      opt.innerHTML = cities[i];

      opt.value = cities[i];

      document.getElementById('city2').appendChild(opt);

    

    //

    

    }

    

    

    

  }

</script>

<label>>

<select id="country" onchange="updateCities(this.value)">

  <option value="Japan">Japan</option>

  <option value="USA">USA</option>

  <option value="Australia">Australia</option>

</select>

<select id="city">

  <option value="none">- Select a City -</option>

</select>

<select id="city2">

  <option value="none">- Select a City2 -</option>

</select>