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

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

本文关键字：填充 城市 下拉列表 地区 jQuery 国家 使用      更新时间：2023-09-26

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

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

http://jsfiddle.net/vCFv6/

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

上面的代码帮助我只填充国家，而不是像州和城市这样的其他国家。任何帮助都非常感谢。

提前谢谢。

您需要

级联三个文本框的.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"));
        }
    });
});

就像其他人说的，你必须处理国家和州选择输入并应用你的逻辑的onchange事件。我在这里摆弄了一下，以便在选择国家/地区时动态获取状态，您也许可以自己编写其余部分 - 小提琴

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

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

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

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

您可以使用 JQuery 自动完成控件来制作它。

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

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

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

相关文章：