JavaScript+node实现三级联动菜单

为了让大家更好地了解“JavaScript+Node实现三级联动菜单”的完整攻略，我会从以下几个方面进行详细讲解：

1. 菜单的基本结构
2. 数据的获取和存储
3. 联动菜单的实现
4. 两个示例

下面，我们将一步步展开。

1. 菜单的基本结构

三级联动菜单的基本结构应该类似于下面这个代码块：

<div>
  <select id="province">
    <option selected>--请选择省份--</option>
  </select>
  <select id="city">
    <option selected>--请选择城市--</option>
  </select>
  <select id="town">
    <option selected>--请选择区县--</option>
  </select>
</div>

其中，每个select元素代表一个下拉框，分别表示省份、城市和区县。默认情况下，每个下拉框的选项都是“--请选择XX--”。

2. 数据的获取和存储

为了实现联动菜单，我们需要先获取每个下拉框的值，并建立对应关系。我们可以将这些数据存储在一个数组内，代码示例如下：

var regions = [
  {
    name: "北京市",
    cities: [
      {
        name: "北京市市辖区",
        districts: [
          {
            name: "东城区"
          },
          {
            name: "西城区"
          },
          // ...
        ]
      },
      {
        name: "北京市郊县",
        districts: [
          {
            name: "密云区"
          },
          {
            name: "延庆区"
          },
          // ...
        ]
      },
      // ...
    ]
  },
  {
    name: "上海市",
    cities: [
      {
        name: "上海市市辖区",
        districts: [
          {
            name: "黄浦区"
          },
          {
            name: "静安区"
          },
          // ...
        ]
      },
      {
        name: "上海市郊县",
        districts: [
          {
            name: "崇明区"
          },
          // ...
        ]
      },
      // ...
    ]
  },
  // ...
];

上述regions数组中，每个元素都表示一个省份。每个省份都包含一个cities数组，其中每个元素都表示一个城市。每个城市都包含一个districts数组，其中每个元素都表示一个区县。

3. 联动菜单的实现

联动菜单的实现可以使用JavaScript和Node.js配合完成。下面是具体的步骤：

1. 定义函数populateSelect，通过传入的数组和select元素，将该元素的options填充。
2. 定义函数createCitySelector和createDistrictSelector，分别创建城市和区县的下拉框。
3. 绑定省份下拉框的change事件，当省份改变时，动态填充城市下拉框。
4. 绑定城市下拉框的change事件，当城市改变时，动态填充区县下拉框。

下面是完整的JavaScript代码示例：

function populateSelect(items, selectElement) {
  selectElement.innerHTML = "";
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(item.name));
    option.setAttribute("value", item.name);
    selectElement.appendChild(option);
  }
}

function createCitySelector(cities) {
  var citySelect = document.createElement("select");
  populateSelect(cities, citySelect);
  citySelect.addEventListener("change", function() {
    var districts = getItemByName(regions, provinceSelect.value).cities.find(function(city) {
      return city.name === citySelect.value;
    }).districts;
    populateSelect(districts, districtSelect);
  });
  return citySelect;
}

function createDistrictSelector(districts) {
  var districtSelect = document.createElement("select");
  populateSelect(districts, districtSelect);
  return districtSelect;
}

function getItemByName(items, name) {
  return items.find(function(item) {
    return item.name === name;
  });
}

var regions = [...]; // 数据省略

var provinceSelect = document.getElementById("province");
populateSelect(regions, provinceSelect);

var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("town");

provinceSelect.addEventListener("change", function() {
  var cities = getItemByName(regions, provinceSelect.value).cities;
  populateSelect(cities, citySelect);

  var districts = getItemByName(regions, provinceSelect.value).cities.find(function(city) {
    return city.name === citySelect.value;
  }).districts;
  populateSelect(districts, districtSelect);
});

citySelect.addEventListener("change", function() {
  var districts = getItemByName(regions, provinceSelect.value).cities.find(function(city) {
    return city.name === citySelect.value;
  }).districts;
  populateSelect(districts, districtSelect);
});

4. 两个示例

下面是两个基于上述联动菜单实现的实例。

示例一：简单三级联动菜单

这是最简单的三级联动菜单，只包含中国各省市区县的数据。你可以点击这里查看示例。

示例二：多级联动菜单

这是一个多级联动菜单，不仅包含中国各省市区县的数据，还包括美国各州县的数据。你可以点击这里查看示例。