jQuery实现选中特定值时隐藏下拉框指定选项

Hey there! 针对你需要根据第一个下拉框的选中值，动态控制第二个下拉框显示/隐藏对应颜色选项的需求，我给你准备了两种实用方案（jQuery 和 原生JavaScript），你可以根据项目环境灵活选择：

核心思路 #

1. 给第二个颜色下拉框的每个选项标记它所属的Veranda类型（比如通过data-veranda属性），让后续的过滤逻辑更清晰直观
2. 监听第一个下拉框的change事件，每次选中值变化时，先隐藏所有颜色选项，再只显示当前选中Veranda对应的颜色

步骤1：HTML结构示例 #

假设你的下拉框结构如下（注意给颜色选项加上data-veranda属性，关联对应的Veranda类型，多个类型用逗号分隔）：

<select id="exampleSelect1">
  <option value="Greenline_Veranda">Greenline Veranda</option>
  <option value="Profiline_Veranda">Profiline Veranda</option>
  <option value="Highline_Veranda">Highline Veranda</option>
</select>

<select id="exampleSelect2">
  <!-- 从数据库填充的颜色选项，标记所属Veranda -->
  <option value="Green" data-veranda="Greenline_Veranda,Highline_Veranda">Green</option>
  <option value="Blue" data-veranda="Greenline_Veranda">Blue</option>
  <option value="Purple" data-veranda="Profiline_Veranda">Purple</option>
  <option value="Pink" data-veranda="Profiline_Veranda">Pink</option>
  <option value="Yellow" data-veranda="Highline_Veranda">Yellow</option>
</select>

方案1：jQuery实现（适合已引入jQuery的项目） #

// 页面加载完成后初始化
$(document).ready(function() {
  // 封装更新颜色选项的函数
  function updateColorOptions(selectedVeranda) {
    // 先隐藏所有颜色选项
    $('#exampleSelect2 option').hide();
    // 显示当前Veranda对应的颜色选项（支持一个颜色属于多个Veranda的情况）
    $('#exampleSelect2 option[data-veranda*="' + selectedVeranda + '"]').show();
    // 重置第二个下拉框的选中状态为第一个可见选项
    $('#exampleSelect2').val($('#exampleSelect2 option:visible').first().val());
  }

  // 初始化：默认显示第一个Veranda对应的颜色
  updateColorOptions($('#exampleSelect1').val());

  // 监听第一个下拉框的变化事件
  $('#exampleSelect1').on('change', function() {
    updateColorOptions($(this).val());
  });
});

方案2：原生JavaScript实现（无需依赖第三方库） #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const select1 = document.getElementById('exampleSelect1');
  const select2 = document.getElementById('exampleSelect2');
  const colorOptions = select2.querySelectorAll('option');

  // 封装更新颜色选项的函数
  function updateColorOptions(selectedVeranda) {
    // 遍历所有颜色选项，判断是否显示
    colorOptions.forEach(option => {
      const verandas = option.dataset.veranda.split(',');
      if (verandas.includes(selectedVeranda)) {
        option.style.display = 'block';
      } else {
        option.style.display = 'none';
      }
    });

    // 重置选中状态为第一个可见选项
    const firstVisible = select2.querySelector('option[style="display: block;"]');
    if (firstVisible) {
      select2.value = firstVisible.value;
    }
  }

  // 初始化：默认加载第一个Veranda的颜色
  updateColorOptions(select1.value);

  // 监听第一个下拉框的变化事件
  select1.addEventListener('change', function() {
    updateColorOptions(this.value);
  });
});

注意事项 #

• 从数据库填充#exampleSelect2时，一定要记得给每个颜色选项加上data-veranda属性，值对应所属的Veranda类型（多个类型用逗号分隔即可）
• 如果颜色和Veranda的对应关系需要从后端动态获取，可以在页面加载时通过接口拉取映射关系，再替换代码中的静态判断逻辑
• 上述代码默认会在切换时重置第二个下拉框的选中值为第一个可见选项，如果你需要保留之前的选中值（只要它在当前可见列表中），可以修改这部分逻辑

内容的提问来源于stack exchange，提问作者Jari Rengeling