正文

新手必看！轻松掌握JS三级联动菜单制作技巧与实战案例

/0 浏览量
0828

在网页设计中，三级联动菜单是一个非常实用的功能，它可以有效地帮助用户快速筛选所需信息，提升用户体验。对于JavaScript新手来说，制作一个三级联动菜单可能会觉得有些困难。别担心，今天我将带你一步步轻松掌握JS三级联动菜单的制作技巧，并提供实战案例。

一、三级联动菜单的基本概念

三级联动菜单通常由三个部分组成：省（一级）、市（二级）、县（三级）。当用户在第一级菜单中选择一个省份后，第二级菜单会自动填充该省份下辖的所有城市；同理，当用户在第二级菜单中选择一个城市后，第三级菜单会自动填充该城市下辖的所有县区。

二、制作三级联动菜单的步骤

1. 准备数据

首先，我们需要准备三级联动菜单所需的数据。通常，这些数据以数组或对象的形式存在。以下是一个示例：

var data = [
  {
    id: 1,
    name: '北京市',
    children: [
      {
        id: 11,
        name: '北京市市辖区'
      },
      {
        id: 12,
        name: '北京市城区'
      }
    ]
  },
  {
    id: 2,
    name: '天津市',
    children: [
      {
        id: 21,
        name: '天津市市辖区'
      }
    ]
  }
];

2. 创建HTML结构

接下来，我们需要创建HTML结构，包括三个下拉菜单（select）：

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

3. 编写JavaScript代码

现在，我们来编写JavaScript代码，实现三级联动菜单的功能。

// 初始化省份
function initProvince() {
  var provinceSelect = document.getElementById('province');
  data.forEach(function(item) {
    var option = document.createElement('option');
    option.value = item.id;
    option.text = item.name;
    provinceSelect.appendChild(option);
  });
}

// 初始化城市
function initCity() {
  var provinceSelect = document.getElementById('province');
  var citySelect = document.getElementById('city');
  var provinceId = provinceSelect.value;
  citySelect.innerHTML = ''; // 清空城市下拉菜单
  data.forEach(function(item) {
    if (item.id === parseInt(provinceId)) {
      item.children.forEach(function(child) {
        var option = document.createElement('option');
        option.value = child.id;
        option.text = child.name;
        citySelect.appendChild(option);
      });
    }
  });
}

// 初始化县区
function initArea() {
  var citySelect = document.getElementById('city');
  var areaSelect = document.getElementById('area');
  var cityId = citySelect.value;
  areaSelect.innerHTML = ''; // 清空县区下拉菜单
  data.forEach(function(item) {
    item.children.forEach(function(child) {
      if (child.id === parseInt(cityId)) {
        var option = document.createElement('option');
        option.value = child.id;
        option.text = child.name;
        areaSelect.appendChild(option);
      }
    });
  });
}

// 绑定事件
initProvince(); // 初始化省份
provinceSelect.addEventListener('change', initCity); // 省份变化时，初始化城市
citySelect.addEventListener('change', initArea); // 城市变化时，初始化县区

4. 测试效果

现在，打开网页，你应该可以看到一个完整的三级联动菜单。当你在省份下拉菜单中选择一个省份时，城市下拉菜单会自动填充该省份下辖的所有城市；同理，当你在城市下拉菜单中选择一个城市时，县区下拉菜单会自动填充该城市下辖的所有县区。

三、实战案例

以下是一个简单的实战案例，实现了一个基于三级联动菜单的城市选择功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>城市选择</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>
  <select id="area"></select>

  <script src="data.js"></script>
  <script src="index.js"></script>
</body>
</html>

在这个案例中，data.js 文件包含了我们之前准备的数据，而 index.js 文件包含了实现三级联动菜单的JavaScript代码。

四、总结

通过本文的讲解，相信你已经掌握了JS三级联动菜单的制作技巧。在实际开发中，你可以根据自己的需求对代码进行修改和扩展。希望这篇文章对你有所帮助！

-- 展开阅读全文 --