首页
后端开发
PHP
实现二级联动功能的代码示例

实现二级联动功能的代码示例

19 次浏览 0 条评论
doc
doc

以下代码演示了如何使用 JavaScript 和 HTML 实现简单的二级联动下拉菜单功能：

<!DOCTYPE html>

<html>
<head>
<title>二级联动示例</title>
</head>
<body>


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


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

[removed]
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');

const citiesByProvince = {
  'guangdong': ['广州市', '深圳市', '珠海市'],
  'jiangsu': ['南京市', '苏州市', '无锡市']
};

provinceSelect.addEventListener('change', (event) => {
  const selectedProvince = event.target.value;
  const cities = citiesByProvince[selectedProvince] || [];

  citySelect[removed] = '';

  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.text = city;
    citySelect.appendChild(option);
  });
});
[removed]

</body>
</html>

代码说明:

  1. 数据结构: 使用 citiesByProvince 对象存储省份和对应城市的映射关系。
  2. 事件监听: 为省份下拉菜单添加 change 事件监听器。
  3. 动态生成选项: 当省份选择发生变化时，根据选择的省份获取对应的城市列表，并动态生成城市下拉菜单的选项。

注意: 这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整和扩展。

doc 文件大小：21KB