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

Question

我正在尝试使用JSON完成下拉列表。我想要3个下拉列表。首先填充国家/地区下拉列表(例如:美国、英国等)。现在，当用户选择USA，然后声明需要使用jQuery .change()填充dropdown。同样，当用户选择州时，他们需要显示城市下拉列表。

我如何才能做到这一点？因为我的JSON文件有点大，所以我在这里添加了它，并尝试填充国家下拉列表，但无法生成州和城市下拉列表……

http://jsfiddle.net/vCFv6/

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

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

提前谢谢。

Answer 1

您需要级联这三个文本框的.change()事件，以便：

• Changing：
  • 清空状态下拉列表中的州和城市

​

正在改变状态: the

• drop (asynchronously)

清空城市：

• 清空城市

​

下面是一个草图，展示了如何链接事件处理程序。下拉列表是异步填充的，因此依赖的下拉列表在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"));
        }
    });
});

Answer 2

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

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

Answer 3

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

你可以用JQuery Autocomplete Widget来实现。

第一次选择时，您只能启用国家/地区自动完成。

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

当用户选择2.时，您将启用第三个自动完成，并设置输入的"state“参数，并根据城市自动完成中的值填充这些值。