Possible Duplicate:
Use jquery to change second select list based on first select list option
I've got two select elements in my code. One for states (#us_state) and second for cities (#city_name). When I choose a "state" the second select element must contain only that cities which exists in selected state.
use jquery append to append the option values (also remember to clear the options outside the iterating loop using
$('#city_name').html("");
$('#city_name').append('<option value="'+city+'">'+city+'</option>');
One possible solution:
var data = {
"State 1": ["City 1", "City 2"],
"State 2": ["City 3", "City 4"],
"State 3": ["City 5", "City 6", "City 7"]
};
var $states = $("#us_state").on("change", function() {
var $cities = $.map(data[this.value], function(city) {
return $("<option />").text(city);
});
$("#city_name").empty().append($cities);
});
for (var state in data) {
$("<option />").text(state).appendTo($states);
}