如何爲選擇框設定值或以前的列表框中的值設置下拉列表框中

Question

可能重複：
Use jquery to change second select list based on first select list option

我已經有兩個選擇元素我碼。一個用於狀態（#us_state），另一個用於城市（#city_name）。當我選擇「狀態」時，第二個選擇元素必須僅包含處於選定狀態的城市。

Answer 1

使用jQuery append附加選項值（也記得使用

$('#city_name').html("");以清除迭代循環之外的選項

$('#city_name').append('<option value="'+city+'">'+city+'</option>'); 

Answer 2

一個可能的解決方案：

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); 
}​ 

DEMO：http://jsfiddle.net/8hbcP/