使用jQuery填充基于国家和州的州和城市下拉菜单

我正在尝试使用JSON完成下拉菜单。我想要3个下拉菜单。首先填充国家下拉菜单（例如：美国，英国等）。现在，当用户选择美国，然后指出下拉需要使用jQuery .change（）填充。再次，当用户选择状态时，他们需要显示城市下拉菜单。使用jQuery填充基于国家和州的州和城市下拉菜单

我该如何做到这一点？由于我的JSON文件稍大我已经在这里添加它，并试图填充下拉列表中的国家，但无法产生的州和城市下拉...

http://jsfiddle.net/vCFv6/

$.each(myJson.country, function (index, value) { 
$("#country").append('<option value="'+value.id+'">'+value.name+'</option>');});

上面的代码帮我填充只是国家而不是其他国家和城市。任何帮助深表感谢。

在此先感谢。

来源

2013-07-01 SpiritOfDragon

怎么又来了，你是在选择的选择移除第二选项”国家“ –

酷似别人说，你必须处理onchange事件的国家&状态选择输入&运用你的逻辑。我在这里骗得越来越状态动态地选择一个国家，你也许能够剩下自己代码 - Fiddle

你也可以看到这个 Populating Dropdown Based On Other Dropdown Value

来源

2013-07-01 12:12:48 face

我用我自己的逻辑，完成了工作。这是我第一次和JSON一起研究这个概念并解决了我的问题。您的代码有助于理解如何在数组中获取数组名称。而不是使用for循环，我使用.each（）来做同样的事情。谢谢。 – SpiritOfDragon

很高兴能帮到你:) – face

你的小提琴帮助我理解了这个过程，谢谢。 – Eagle

您需要获取“上一个”下拉列表的值，并过滤掉其他列表。 Basicly你有两个选择：

有三个下拉列表中的所有值。然后过滤那些不需要的。
在第一个值中选择一个值后，挂钩change（）事件，使用所选值对某个后端进行ajax调用，并返回与该国家对应的州和城市。

来源

2013-07-01 11:52:03 Eric

在您的代码中，您必须在进行选择时编写所有处理程序，并且必须根据输入参数查询JSON对象并填充更多下拉列表，例如您创建的国家/地区。在这种情况下，您在JSON中拥有客户端的所有数据。通常这类数据都在数据库中，所以您必须从服务器获取数据。

您可以使用JQuery Autocomplete Widget。

首先选择您只启用国家自动填充。

用户做出选择后，您在javascript中设置状态源（将Country参数传递给方法，并且当用户输入时，根据country参数填充服务器的值）。

当用户进行了2.选择后，您将启用第三次自动填充，并设置输入“状态”参数并根据城市自动填充中的值填充值。

来源

2013-07-01 11:57:05 speti43

你需要级联的三个文本框，使得.change()事件：

改变国家：
- 清空州和城市下拉
- 填充状态下拉列表（异步）
更改状态：
- 清空城市下拉
- 填充城市下拉（异步）

下面是一个纲要草案，显示了如何链中的事件处理程序。下拉列表是异步填充的，因此在AJAX请求之前依赖下拉列表被清空。

$("#country").change(function() { 
    $("#state, #city").find("option:gt(0)").remove(); 
    $("#state").find("option:first").text("Loading..."); 
    $.getJSON("/get/states", { 
     country_id: $(this).val() 
    }, function (json) { 
     $("#state").find("option:first").text(""); 
     for (var i = 0; i < json.length; i++) { 
      $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state")); 
     } 
    }); 
}); 
$("#state").change(function() { 
    $("#city").find("option:gt(0)").remove(); 
    $("#city").find("option:first").text("Loading..."); 
    $.getJSON("/get/cities", { 
     state_id: $(this).val() 
    }, function (json) { 
     $("#city").find("option:first").text(""); 
     for (var i = 0; i < json.length; i++) { 
      $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city")); 
     } 
    }); 
});

来源

2013-07-01 12:05:30

使用jQuery填充基于国家和州的州和城市下拉菜单

回答

相关问题