如何根据第一个select下拉框的选中值隐藏第二个下拉的对应选项

代码不生效的核心问题 #

• 绑定逻辑错误：你在父分类的change事件内反复绑定子分类的change事件，导致只有操作子分类时才会触发选项隐藏，没有实现选完父分类立刻更新子分类选项的效果
• 没有重置状态：每次父分类切换前没有先恢复所有子选项的显示状态，会导致之前隐藏的选项一直无法显示，逻辑混乱
• 兼容问题：部分浏览器不支持<option>元素直接调用hide()，搭配hidden属性可以保证效果稳定

实现方案 #

你不需要额外绑定子分类的change事件，只需要在父分类切换时直接修改子分类选项的显示状态即可，hide()可以使用，但要配合状态重置逻辑，以下是可用代码：

JS代码

$('#category').change(function() {
  const cat = $(this).val();
  // 每次切换先重置所有子选项为显示状态
  $('#sub_category option').show().prop('hidden', false);

  if (['0', '1', '2'].includes(cat)) {
    // 父分类为0/1/2时，隐藏1、2、3选项，仅保留Other
    $('#sub_category option[value="1"], #sub_category option[value="2"], #sub_category option[value="3"]').hide().prop('hidden', true);
    // 自动选中Other
    $('#sub_category').val('0');
  } else if (cat === '3') {
    // 父分类为3时，隐藏Other选项
    $('#sub_category option[value="0"]').hide().prop('hidden', true);
    // 清空选中值，引导用户选择子分类
    $('#sub_category').val('');
  }
// 页面加载时主动触发一次，保证初始状态符合默认选中的父分类
}).trigger('change');

HTML代码（补全value为3的父分类选项方便测试）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="category" id="category">
  <option value="0">Type A</option>
  <option value="1">Type B</option>
  <option value="2">Type C</option>
  <option value="3">Type D</option>
</select>

<select name="sub_category" id="sub_category">
  <option value="" hidden>Select Sub Category</option>
  <option value="0">Other</option>
  <option value="1">Op1</option>
  <option value="2">Op2</option>
  <option value="3">Op3</option>
</select>

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