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

Question

我正在尝试使用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>');});

上面的代码可以帮助我填充国家,但不包括其他国家和城市.任何帮助深表感谢.

提前致谢.

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

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