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