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

【问题标题】：Populate state and city dropdowns based on country and state using jQuery使用 jQuery 根据国家和州填充州和城市下拉列表
【发布时间】：2013-06-28 12:49:22
【问题描述】：

我正在尝试使用 JSON 完成下拉菜单。我想要3个下拉菜单。首先填充国家下拉列表（例如：美国、英国等）。现在，当用户选择 USA 时，需要使用 jQuery .change() 填充状态下拉列表。同样，当用户选择他们需要显示城市下拉列表的州时。

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

http://jsfiddle.net/vCFv6/

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

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

提前致谢。

【问题讨论】：

如何再次删除“选择国家/地区”的第二个选项

标签： javascript jquery json ajax html-select

【解决方案1】：

您需要级联三个文本框的.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"));
        }
    });
});

【讨论】：

【解决方案2】：

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

~~你也可以看到这个根据其他下拉值填充下拉列表~~

【讨论】：

我用自己的逻辑完成了工作。这是我第一次使用 JSON，我研究了这个概念并解决了我的问题。您的代码有助于理解如何在数组中获取数组名称。我没有使用 for 循环，而是使用了 .each() 来做同样的事情。谢谢。
我想知道为什么当你选择州时城市没有被填充

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

您可以使用JQuery Autocomplete Widget。

您只启用国家/地区自动完成的第一个选择。

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

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

【讨论】：