通过隐藏option实现select的联动效果

当我们需要实现 select 元素之间的联动效果时，往往需要使用 JavaScript 动态改变 select 的 options。但实际上，我们也可以通过设置option的隐藏与显示来实现联动效果。

下面是通过隐藏 option 实现 select 的联动效果的完整攻略：

步骤一：编写 HTML 结构

首先我们需要编写 HTML 结构，包含所有要联动的 select 元素。例如：

<select id="province">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<select id="city">
  <option value="">请选择</option>
  <option value="beijing1" class="beijing">北京1</option>
  <option value="beijing2" class="beijing">北京2</option>
  <option value="shanghai1" class="shanghai">上海1</option>
  <option value="shanghai2" class="shanghai">上海2</option>
  <option value="guangzhou1" class="guangzhou">广州1</option>
  <option value="guangzhou2" class="guangzhou">广州2</option>
</select>

这里我们有两个 select 元素，一个是省份，一个是城市。城市元素的 option 标签中添加了一个 class 属性，标识这个 option 属于哪个省份。

步骤二：通过 JavaScript 监听 select 元素的变化

接下来，我们需要通过 JavaScript 监听 select 元素的变化，当省份 select 元素的值发生改变时，我们需要根据选中的省份值将城市 select 元素中不属于该省份的 option 隐藏起来。代码如下：

const provinceSelect = document.querySelector('#province');
const citySelect = document.querySelector('#city');

provinceSelect.addEventListener('change', function() {
  const selectedProvince = this.value;
  const cityOptions = citySelect.querySelectorAll('option');
  cityOptions.forEach(function(option) {
    if (option.classList.contains(selectedProvince)) {
      option.style.display = '';
    } else {
      option.style.display = 'none';
    }
  });
});

这段代码首先获取了省份和城市 select 元素，然后在省份 select 元素值发生变化时，获取被选中省份的值，并获取城市 select 元素的所有 option 标签。接着遍历 cityOptions 对所有 option 进行判断，如果该 option 的 class 中包含了被选中省份的值，则将 display 设为默认值（即显示），否则将 option 隐藏起来。

步骤三：测试

在完成以上两个步骤后，我们可以测试一下联动效果是否实现。首先进入 HTML 页面，随便选择一个省份，我们应该能够看到城市列表只显示该省份下的城市。例如，选择“北京”后，城市 select 元素中只会显示“北京1”和“北京2”两个 option。

示例一：

<select id="province">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<select id="city">
  <option value="">请选择</option>
  <option value="beijing1" class="beijing">北京1</option>
  <option value="beijing2" class="beijing">北京2</option>
  <option value="shanghai1" class="shanghai">上海1</option>
  <option value="shanghai2" class="shanghai">上海2</option>
  <option value="guangzhou1" class="guangzhou">广州1</option>
  <option value="guangzhou2" class="guangzhou">广州2</option>
</select>

<script>
  const provinceSelect = document.querySelector('#province');
  const citySelect = document.querySelector('#city');

  provinceSelect.addEventListener('change', function() {
    const selectedProvince = this.value;
    const cityOptions = citySelect.querySelectorAll('option');
    cityOptions.forEach(function(option) {
      if (option.classList.contains(selectedProvince)) {
        option.style.display = '';
      } else {
        option.style.display = 'none';
      }
    });
  });
</script>

示例二：

<select id="province">
  <option value="">请选择</option>
  <option value="east">华东</option>
  <option value="south">华南</option>
  <option value="north">华北</option>
</select>

<select id="city">
  <option value="">请选择</option>
  <option value="shanghai" class="east">上海</option>
  <option value="nanjing" class="east">南京</option>
  <option value="hangzhou" class="east">杭州</option>
  <option value="shenzhen" class="south">深圳</option>
  <option value="guangzhou" class="south">广州</option>
  <option value="beijing" class="north">北京</option>
  <option value="tianjin" class="north">天津</option>
</select>

<script>
  const provinceSelect = document.querySelector('#province');
  const citySelect = document.querySelector('#city');

  provinceSelect.addEventListener('change', function() {
    const selectedProvince = this.value;
    const cityOptions = citySelect.querySelectorAll('option');
    cityOptions.forEach(function(option) {
      if (option.classList.contains(selectedProvince)) {
        option.style.display = '';
      } else {
        option.style.display = 'none';
      }
    });
  });
</script>

以上两个示例可以在HTML中直接运行，分别实现了不同联动元素之间的联动效果。