用select option做一个选择城市的二级联动

以下是一个选择城市的二级联动的示例代码，使用了HTML、CSS和JavaScript：

HTML代码：

<label for="province">省份：</label>
<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
  <!-- 其他省份选项 -->
</select>

<label for="city">城市：</label>
<select id="city">
  <option value="">请选择城市</option>
</select>

CSS代码：

label {
  display: inline-block;
  width: 60px;
  text-align: right;
  margin-right: 10px;
}

select {
  width: 200px;
  padding: 5px;
  margin-bottom: 10px;
}

JavaScript代码：

const cityData = {
  "北京市": ["北京市"],
  "上海市": ["上海市"],
  "广东省": ["广州市", "深圳市", "佛山市", "东莞市", "珠海市", "中山市", "汕头市", "惠州市", "江门市", "肇庆市", "潮州市", "揭阳市", "汕尾市", "河源市", "阳江市", "清远市", "梅州市", "韶关市", "茂名市", "湛江市"]
  // 其他省份和城市数据
};

const provinceSelect = document.getElementById("province");
const citySelect = document.getElementById("city");

provinceSelect.addEventListener("change", function() {
  const province = this.value;
  if (province) {
    const cities = cityData[province];
    citySelect.innerHTML = "<option value=''>请选择城市</option>";
    cities.forEach(function(city) {
      const option = document.createElement("option");
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  } else {
    citySelect.innerHTML = "<option value=''>请选择城市</option>";
  }
});

解释：

1. HTML代码中有两个select元素，一个用于选择省份，一个用于选择城市，初始时城市选项为空。
2. CSS代码用于设置标签和下拉框的样式。
3. JavaScript代码定义了一个cityData对象，存储了各省份和城市的数据。然后使用addEventListener方法监听省份下拉框的change事件，当选择了一个省份时，根据该省份的城市数据动态生成城市选项，并添加到城市下拉框中。如果没有选择省份，则城市选项清空。

注意事项：

1. cityData对象中的键（即省份名称）必须与省份下拉框中的选项值相同，否则无法正确匹配城市数据。
2. 如果省份下拉框的选项值为空字符串，cityData对象中对应的值也应该是一个空数组。
3. 在实际应用中，可以将城市数据存储在后端数据库中，通过Ajax请求获取数据并动态生成城市选项。