html实现组合式级联选择器

组合式级联选择器可以通过HTML中的select标签和option标签来实现。

以下是一个简单的例子：

<label for="country">选择国家：</label>
<select id="country">
  <option value="中国">中国</option>
  <option value="美国">美国</option>
  <option value="英国">英国</option>
</select>

<label for="city">选择城市：</label>
<select id="city">
  <option value="北京" data-country="中国">北京</option>
  <option value="上海" data-country="中国">上海</option>
  <option value="纽约" data-country="美国">纽约</option>
  <option value="洛杉矶" data-country="美国">洛杉矶</option>
  <option value="伦敦" data-country="英国">伦敦</option>
  <option value="曼彻斯特" data-country="英国">曼彻斯特</option>
</select>

在这个例子中，第一个select用于选择国家，第二个select用于选择城市。每个城市都有一个data-country属性，来指示它所属的国家。

接下来，可以使用JavaScript来实现级联选择器的功能。当选择国家时，城市选项将被更新以仅显示所选国家的城市。以下是一个简单的实现：

const countrySelect = document.getElementById('country');
const citySelect = document.getElementById('city');

// 当选择国家时更新城市选项
countrySelect.addEventListener('change', (event) => {
  const selectedCountry = event.target.value;
  // 隐藏所有城市选项
  for (const option of citySelect.options) {
    option.hidden = true;
  }
  // 仅显示所选国家的城市选项
  for (const option of citySelect.options) {
    if (option.dataset.country === selectedCountry) {
      option.hidden = false;
    }
  }
});

// 初始化城市选项，仅显示第一个国家的城市
const firstCountry = countrySelect.options[0].value;
for (const option of citySelect.options) {
  if (option.dataset.country !== firstCountry) {
    option.hidden = true;
  }
}

这个JavaScript代码将监听选择国家的事件，并根据所选国家更新城市选项。在初始化时，它仅显示第一个国家的城市选项。