一个最简单的级联下拉菜单-前端开发

下面是一个最简单的级联下拉菜单的制作攻略：

下面是一个最简单的级联下拉菜单的制作攻略：

一、确定数据结构

首先需要确定级联下拉菜单的数据结构。通常使用 JSON 格式存储。一个简单的数据结构示例如下：

{
  "中国": {
    "广东": ["广州", "深圳", "东莞"],
    "北京": ["朝阳区", "海淀区", "丰台区"],
    "上海": ["浦东新区", "徐汇区", "长宁区"]
  },
  "美国": {
    "纽约": ["曼哈顿", "布鲁克林"],
    "加州": ["旧金山", "洛杉矶"],
    "德州": ["达拉斯", "休斯顿"]
  },
  "日本": {
    "东京": ["千代田区", "中央区"],
    "大阪": ["梅田", "心斋桥"],
    "北海道": ["札幌市", "旭川市"]
  }
}

二、创建 HTML 结构

创建基本的 HTML 结构，并为每个下拉菜单添加对应的 id。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>级联下拉菜单</title>
</head>
<body>

<select id="province"><option>请选择省份</option></select>

<select id="city"><option>请选择城市</option></select>

<select id="area"><option>请选择地区</option></select>

<script src="app.js"></script>

</body>
</html>

三、编写 JavaScript 代码

编写 JavaScript 代码，根据选中的省份，自动刷新城市和地区选项。以下是一个简单的代码示例：

const data = {
  "中国": {
    "广东": ["广州", "深圳", "东莞"],
    "北京": ["朝阳区", "海淀区", "丰台区"],
    "上海": ["浦东新区", "徐汇区", "长宁区"]
  },
  "美国": {
    "纽约": ["曼哈顿", "布鲁克林"],
    "加州": ["旧金山", "洛杉矶"],
    "德州": ["达拉斯", "休斯顿"]
  },
  "日本": {
    "东京": ["千代田区", "中央区"],
    "大阪": ["梅田", "心斋桥"],
    "北海道": ["札幌市", "旭川市"]
  }
};

const province = document.getElementById('province');
const city = document.getElementById('city');
const area = document.getElementById('area');

function refreshCity() {
  const selectedProvince = province.value;
  const cities = data[selectedProvince];
  city.innerHTML = '<option>请选择城市</option>';
  area.innerHTML = '<option>请选择地区</option>';
  Object.keys(cities).forEach(function (k) {
    const option = document.createElement('option');
    option.text = k;
    city.add(option);
  });
}

function refreshArea() {
  const selectedProvince = province.value;
  const selectedCity = city.value;
  const areas = data[selectedProvince][selectedCity];
  area.innerHTML = '<option>请选择地区</option>';
  areas.forEach(function (k) {
    const option = document.createElement('option');
    option.text = k;
    area.add(option);
  });
}

province.addEventListener('change', function () {
  refreshCity();
});

city.addEventListener('change', function () {
  refreshArea();
});

在这段代码中，我们首先获取了三个下拉菜单的元素，并定义了两个刷新菜单的函数 refreshCity 和 refreshArea。当省份下拉菜单的值改变时，通过 refreshCity 函数刷新城市下拉菜单的选项。当城市下拉菜单的值改变时，通过 refreshArea 函数刷新地区下拉菜单的选项。

值得注意的是，在 refreshCity 函数中我们使用了 Object.keys() 和 forEach() 函数遍历城市列表，并为每个城市创建一个选项添加到城市下拉菜单中。在 refreshArea 函数中，我们则直接遍历了地区列表，并和城市下拉选项的方式相同地添加了地区选项。

四、示例说明

以下是一个简单的例子，该例子展示了在中国、美国、日本三个国家中选择不同的省份、城市和地区。根据用户的选择，城市和地区的选项会自动刷新。

{
  "中国": {
    "广东": ["广州", "深圳", "东莞"],
    "北京": ["朝阳区", "海淀区", "丰台区"],
    "上海": ["浦东新区", "徐汇区", "长宁区"]
  },
  "美国": {
    "纽约": ["曼哈顿", "布鲁克林"],
    "加州": ["旧金山", "洛杉矶"],
    "德州": ["达拉斯", "休斯顿"]
  },
  "日本": {
    "东京": ["千代田区", "中央区"],
    "大阪": ["梅田", "心斋桥"],
    "北海道": ["札幌市", "旭川市"]
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>级联下拉菜单示例</title>
</head>
<body>

<select id="province"><option>请选择国家</option></select>

<select id="city"><option>请选择省份</option></select>

<select id="area"><option>请选择城市</option></select>

<script>
const data = {
  "中国": {
    "广东": ["广州", "深圳", "东莞"],
    "北京": ["朝阳区", "海淀区", "丰台区"],
    "上海": ["浦东新区", "徐汇区", "长宁区"]
  },
  "美国": {
    "纽约": ["曼哈顿", "布鲁克林"],
    "加州": ["旧金山", "洛杉矶"],
    "德州": ["达拉斯", "休斯顿"]
  },
  "日本": {
    "东京": ["千代田区", "中央区"],
    "大阪": ["梅田", "心斋桥"],
    "北海道": ["札幌市", "旭川市"]
  }
};

const province = document.getElementById('province');
const city = document.getElementById('city');
const area = document.getElementById('area');

Object.keys(data).forEach(function (k) {
  const option = document.createElement('option');
  option.text = k;
  province.add(option);
});

province.addEventListener('change', function () {
  const selectedProvince = province.value;
  const cities = data[selectedProvince];
  city.innerHTML = '<option>请选择城市</option>';
  area.innerHTML = '<option>请选择地区</option>';
  Object.keys(cities).forEach(function (k) {
    const option = document.createElement('option');
    option.text = k;
    city.add(option);
  });
});

city.addEventListener('change', function () {
  const selectedProvince = province.value;
  const selectedCity = city.value;
  const areas = data[selectedProvince][selectedCity];
  area.innerHTML = '<option>请选择地区</option>';
  areas.forEach(function (k) {
    const option = document.createElement('option');
    option.text = k;
    area.add(option);
  });
});
</script>

</body>
</html>

在这个例子中，我们在 HTML 中添加了三个下拉菜单的元素，并在 JavaScript 中动态地添加了对应的选项。当用户选择了省份之后，城市和地区选项即会自动刷新，显示该省份下的城市和地区。