根据其他其他选择下拉列表填充选择下拉菜单

如何填充其值取决于父级下拉菜单中所选内容的选择下拉菜单。 E-g，第一个下拉列表中包含国家名称，选择下一个下拉列表将加载该国家的相应州，在第一个下拉列表中选择。然后说我有第三个下拉列表，我将这个特定状态的图像与第二个下拉列表中选择的内容相对应。根据其他其他选择下拉列表填充选择下拉菜单

这怎么可以在JQuery中完成。

这种状态

来源

2011-10-18 Mike

看看这个插件：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>

来源

2011-10-18 20:39:15

的EG

国家>>>>>美国>>>>>>地图有一个插件来做到这一点

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

或者，你可以看到

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

来源

2011-10-18 19:55:36

是没可能不 – Mike

可能的，但它的那么优雅solution.Please采取在我与我的回答给了问题链接的答案看清楚插件。 –

对于第一个下拉列表“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' 
});

玩得开心！ :)

（对不起，我的英语：“>）

来源

2011-10-18 20:00:23 Briganti

根据其他其他选择下拉列表填充选择下拉菜单

回答

相关问题