javascript - 使用 jQuery 根据国家和州填充州和城市下拉菜单

Question

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

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

http://jsfiddle.net/vCFv6/

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