Question

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

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

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

以上代码可以帮助我填充国家，但不包括州和城市等其他国家/地区。非常感谢任何帮助。

提前致谢。

Answer 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"));
        }
    });
});

Answer 2

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

~~您可能也会看到这一点根据其他下拉值填充下拉列表~~

Answer 3

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

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

Answer 4

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

您可以使用JQuery Autocomplete Widget进行制作。

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

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

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

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

4 个答案: