<script>
var cities = {
'state1': {'city1': 'city 1', 'city2': 'city 2'},
'state2': {'city3': 'city 3', 'city4': 'city 4'}
};
var states = {
'country1': {'state1': 'State 1', 'state2': 'State 2'}
};
function OnStateChanged (combo) {
var selstates = [];
for (var i = 0; i < combo.options.length; i++) {
if (combo.options.selected) {
selstates.push (combo.options.value);
}
}
var options = '';
for (var i = 0; i < selstates.length; i++) {
var state = selstates;
for (var city in cities[state]) {
options += '<option value="' + city + '">' + cities[state][city] + '</option>';
}
}
var citiesCombo = document.getElementById ("citiesCombo");
citiesCombo.innerHTML = options;
}
function OnCountriesChanged (combo) {
var selCountries = [];
for (var i = 0; i < combo.options.length; i++) {
if (combo.options.selected) {
selCountries.push (combo.options.value);
}
}
var options = '';
for (var i = 0; i < selCountries.length; i++) {
var country = selCountries;
for (var state in states[country]) {
options += '<option value="' + state + '">' + states[country][state] + '</option>';
}
}
var statesCombo = document.getElementById ("statesCombo");
statesCombo.innerHTML = options;
citiesCombo.innerHTML = '';
}
</script>
<select multiple="multiple" name="cbocountry[]" onchange="OnCountriesChanged(this)">
<option value="country1">Country 1</option>
</select>
<select multiple="multiple" id="statesCombo" name="cbostates[]" onchange="OnStateChanged(this)">
</select>
<select multiple="multiple" name="cbocities[]" id="citiesCombo" >
</select>
var cities = {
'state1': {'city1': 'city 1', 'city2': 'city 2'},
'state2': {'city3': 'city 3', 'city4': 'city 4'}
};
var states = {
'country1': {'state1': 'State 1', 'state2': 'State 2'}
};
function OnStateChanged (combo) {
var selstates = [];
for (var i = 0; i < combo.options.length; i++) {
if (combo.options.selected) {
selstates.push (combo.options.value);
}
}
var options = '';
for (var i = 0; i < selstates.length; i++) {
var state = selstates;
for (var city in cities[state]) {
options += '<option value="' + city + '">' + cities[state][city] + '</option>';
}
}
var citiesCombo = document.getElementById ("citiesCombo");
citiesCombo.innerHTML = options;
}
function OnCountriesChanged (combo) {
var selCountries = [];
for (var i = 0; i < combo.options.length; i++) {
if (combo.options.selected) {
selCountries.push (combo.options.value);
}
}
var options = '';
for (var i = 0; i < selCountries.length; i++) {
var country = selCountries;
for (var state in states[country]) {
options += '<option value="' + state + '">' + states[country][state] + '</option>';
}
}
var statesCombo = document.getElementById ("statesCombo");
statesCombo.innerHTML = options;
citiesCombo.innerHTML = '';
}
</script>
<select multiple="multiple" name="cbocountry[]" onchange="OnCountriesChanged(this)">
<option value="country1">Country 1</option>
</select>
<select multiple="multiple" id="statesCombo" name="cbostates[]" onchange="OnStateChanged(this)">
</select>
<select multiple="multiple" name="cbocities[]" id="citiesCombo" >
</select>