正文

教你轻松打造jQuery三级联动下拉菜单，轻松实现地址选择！

/0 浏览量
0716

在网站开发中，地址选择是一个常见的功能。使用jQuery实现三级联动下拉菜单，可以让用户更方便地选择地址。下面，我将一步步教你如何轻松打造这样的下拉菜单。

准备工作

在开始之前，请确保你的项目中已经引入了jQuery库。以下是一个简单的引入方式：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

创建HTML结构

首先，我们需要创建三个下拉菜单，分别对应省、市、区。以下是HTML结构：

<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="district">
  <option value="">请选择区/县</option>
</select>

创建数据

接下来，我们需要准备一些数据，用于填充下拉菜单。这里，我们以中国部分省份为例：

var addressData = {
  "北京": ["北京市", "天津市", "河北省"],
  "上海": ["上海市", "江苏省", "浙江省"],
  // ... 其他省份
};

编写jQuery代码

现在，我们来编写jQuery代码，实现三级联动下拉菜单。

$(function() {
  // 初始化省份下拉菜单
  var provinceSelect = $("#province");
  for (var province in addressData) {
    provinceSelect.append("<option value='" + province + "'>" + province + "</option>");
  }

  // 监听省份下拉菜单的变化
  provinceSelect.change(function() {
    var province = $(this).val();
    var citySelect = $("#city");
    var districtSelect = $("#district");

    // 清空城市和区/县下拉菜单
    citySelect.empty();
    districtSelect.empty();

    // 填充城市下拉菜单
    if (addressData[province]) {
      for (var city in addressData[province]) {
        citySelect.append("<option value='" + addressData[province][city] + "'>" + addressData[province][city] + "</option>");
      }
    }

    // 初始化城市下拉菜单
    citySelect.change();
  });

  // 监听城市下拉菜单的变化
  citySelect.change(function() {
    var city = $(this).val();
    var districtSelect = $("#district");

    // 清空区/县下拉菜单
    districtSelect.empty();

    // 填充区/县下拉菜单
    if (addressData[$("#province").val()][city]) {
      for (var district in addressData[$("#province").val()][city]) {
        districtSelect.append("<option value='" + addressData[$("#province").val()][city][district] + "'>" + addressData[$("#province").val()][city][district] + "</option>");
      }
    }
  });
});

测试

现在，你可以将以上代码添加到你的HTML页面中，并测试三级联动下拉菜单的功能。当你选择一个省份后，城市下拉菜单会自动填充对应的 cities；选择一个城市后，区/县下拉菜单会自动填充对应的 districts。

通过以上步骤，你就可以轻松地使用jQuery打造一个三级联动下拉菜单，实现地址选择功能了。希望这篇文章能帮助你！

-- 展开阅读全文 --