6

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

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

提前致谢。

4

4 回答 4

6

您需要级联.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"));
        }
    });
});
于 2013-07-01T12:05:30.380 回答
4

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

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

于 2013-07-01T12:12:48.243 回答
0

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

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

第一个选择只启用国家自动完成。

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

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

于 2013-07-01T11:57:05.837 回答
0

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

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