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

Populate state and city dropdowns based on country and state using jQuery

提问by SpiritOfDragon

I am trying to accomplish dropdowns using JSON. I want 3 dropdowns. First populate the country dropdown (eg: usa, uk etc.,). Now, when the user select USA then states dropdown needs to be populated by using jQuery .change(). Again when user select the state they need to be presented with cities dropdowns.

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

How can I achieve this? As my JSON file is slightly big I have added it here and tried to populate countries dropdown but unable to generate states and cities drop down...

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

http://jsfiddle.net/vCFv6/

http://jsfiddle.net/vCFv6/

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

The above code helps me populate just the countries but not others like states and cities. Any help is much appreciated.

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

Thanks in advance.

提前致谢。

采纳答案by face

Exactly like others said, you have to handle the onchangeevent of country & state select inputs & apply your logic. I have fiddled here for getting states dynamically on selecting a country, you might be able to code the rest yourself - Fiddle

就像其他人所说的那样，您必须处理onchange国家和州选择输入的事件并应用您的逻辑。我在这里摆弄了在选择一个国家时动态获取状态，你也许可以自己编写其余的代码 - Fiddle

You may also see this Populating Dropdown Based On Other Dropdown Value

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

回答by Salman A

You need to cascade the .change()events of the three text boxes such that:

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

• Changing country:
  • Empties the state and city dropdown
  • Populates the state dropdown (asynchronously)
• Changing state:
  • Empties the city dropdown
  • Populate the city drop down (asynchronously)

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

Below is a draft outline which shows how to chain the event handlers. The dropdowns are populated asynchronously so the dependent dropdowns are emptied before AJAX request.

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

回答by Eric

You need to get the value of the "previous" dropdown, and filter out the other ones. Basicly you got two options:

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

1. Have all three dropdowns with all values. Then filter out those which is not needed.
2. Upon selecting a value in the first one, hook the change() event, make an ajax call to some backend with the selected value, and return the states and cities that corresponds to that country.

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

回答by speti43

In your code you have to write all handlers when you make a selection, and have to query your JSON objects according to the input parameter and populate your further dropdowns, like you made the country. In that case you have all data on client side in JSON. Usually this kind of data are in a database, so you have to get from the server.

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

You can make it with JQuery Autocomplete Widget.

您可以使用JQuery Autocomplete Widget 来实现。

First selection you enable only the Country autocomplete.

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

After the user made the selection you set the state source in javascript (pass the Country parameter to the method, and when the user is typing you populates the value from the server according to the country parameter).

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

When the user have made the 2. selection you will enable the third autocomplete, and set the input "state" parameter and populate the values according to that in the city autocomplete.

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