在其他选择下拉列表的基础上填充一个选择下拉列表

Question

如何填充一个选择下拉列表，它的值依赖于父下拉列表中选择的内容。例如，第一个下拉菜单中有国家名称，在选择时，下一个下拉菜单将加载该国家的相应状态，在第一个下拉菜单中选择。然后我有第三个下拉菜单，我在这里放置特定状态的图像，它对应于第二个下拉菜单中选择的内容。

如何在JQuery中做到这一点。

eg

州国家

>>>>>>>>>>>地图这个状态

Answer 1

有一个插件可以做到这一点

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

或者你可以看到

的答案

我如何用第一个下拉菜单的onChange事件填充另一个下拉菜单?

Answer 2

对于第一个下拉菜单"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'
});

玩得开心!:)

(对不起我的英语:">)

Answer 3

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