Возможный дубликат:
Использование jquery для изменения второго списка выбора на основе опции первого выбора списка
У меня есть два элемента select в моем коде. Один для состояний (#us_state) и второй для городов (#city_name). Когда я выбираю «состояние», второй элемент select должен содержать только те города, которые существуют в выбранном состоянии.
использовать jquery append для добавления значений параметров (также не забудьте очистить параметры вне цикла итерации, используя
$('#city_name').html("");
$('#city_name').append('<option value="'+city+'">'+city+'</option>');
Одно из возможных решений:
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); }