使用jQuery根据国家和州填充州和城市下拉列表

我正在尝试使用JSON完成下拉列表。 我想要3个下拉菜单。 首先填写国家/地区下拉菜单（例如：美国，英国等）。 现在，当用户选择USA时，需要使用jQuery .change（）填充下拉列表。 再次当用户选择状态时，他们需要向城市下拉列表显示。

我怎样才能做到这一点？ 由于我的JSON文件略大，我在这里添加了它并试图填充国家下拉列表但无法生成州和城市下降…

http://jsfiddle.net/vCFv6/

$.each(myJson.country, function (index, value) { $("#country").append(''+value.name+'');}); 

上面的代码可以帮助我填充国家，但不包括其他国家和城市。 任何帮助深表感谢。

提前致谢。

Answer 1

正如其他人所说，你必须处理国家和州选择输入的onchange事件并应用你的逻辑。 我已经在这里摆弄了动态选择国家的状态，你可以自己编写其余的代码 – 小提琴

您可能还会看到此基于其他下拉值的填充下拉列表

Answer 2

您需要级联三个文本框的.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++) { $("").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++) { $("").attr("value", json[i].id).text(json[i].name).appendTo($("#city")); } }); }); 

Answer 3

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

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

Answer 4

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

您可以使用JQuery Autocomplete Widget创建它。

首先选择您只启用国家/地区自动填充function。

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

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