根據其他其他選擇下拉列表填充選擇下拉菜單

Question

如何填充其值取決於父級下拉菜單中所選內容的選擇下拉菜單。 E-g，第一個下拉列表中包含國家名稱，選擇下一個下拉列表將加載該國家的相應州，在第一個下拉列表中選擇。然後說我有第三個下拉列表，我將這個特定狀態的圖像與第二個下拉列表中選擇的內容相對應。

這怎麼可以在JQuery中完成。

這種狀態

Answer 1

看看這個插件：cascade 你可以有幾個CSS類爲每個州要與相應的背景圖像和開關等類上顯示這些標誌第二個下拉更改事件：

var statesList = [ 
    { 
    'When': 'US', 
    'Value': 'nope', 
    'Text': 'Select state'}, 
{ 
    'When': 'US', 
    'Value': 'US_AL', 
    'Text': 'Alabama'}, 

{ 
    'When': 'US', 
    'Value': 'US_AK', 
    'Text': 'Alaska'}, 
{ 
    'When': 'IN', 
    'Value': 'nope', 
    'Text': 'Select state'}, 
{ 
    'When': 'IN', 
    'Value': 'IN_AP', 
    'Text': 'Andra Pradesh'}, 

{ 
    'When': 'IN', 
    'Value': 'IN_AS', 
    'Text': 'Assam'} 
]; 

$("#state").cascade("#country", { 
    list: statesList, 
    template: function(item) { 
     return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
    }, 
    match: function(selectedValue) { 
     return this.When == selectedValue; 
    } 
}); 

$("#state").change(function() { 
    $("#flag").removeClass().addClass($(this).val()); 
}); 

<label>Country 
    <select id="country"> 
     <option value="nope">Choose a country</option> 
     <option value="US">United States</option> 
     <option value="IN">India</option> 
    </select> 
</label> 

<label>State 
    <select id="state"> 
     <option value='nope'>Select a country before</option> 
    </select> 
</label> 

<span id="flag" style="border: 1px solid #000; padding: 1px;"> 
</span> 

Answer 2

的EG

國家>>>>>美國>>>>>>地圖有一個插件來做到這一點

http://code.google.com/p/jqueryselectcombo/

或者，你可以看到

How can I populate another dropdown with the onChange event of the first dropdown?

Answer 3

對於第一個下拉列表「onChange」事件，您應該調用一個ajax函數，它將返回第二個下拉列表項（...或其他）。當ajax調用完成時，您只需要附加結果項。

僞：

$select1.change(function(){ 
    caountry_id = select1.find(':selected').val(); 
    $.get(// ajax call 
    'path/to/script', // php script, this will return the states 
    {country: country_id}, 
    function(data){ // callback function 
     $.each(data, function(key, value){ // iterate trough the items 
      $select2.  // append nem options 
       append($("<option></option>"). 
       attr("value",key). 
       text(value)); 
     }); 
    }, 
    'json' 
}); 

玩得開心！ :)

（對不起，我的英語：「>）