jQuery实现仅显示data-subtext与选中选项值匹配的下拉产品选项

直接通过原生JS绑定事件即可实现需求，不需要额外依赖库：

• 监听分类下拉框的选中变化事件，每次分类切换时触发筛选逻辑
• 筛选时获取当前选中的分类标识，遍历产品下拉框的所有选项，对比选项data-subtext属性和分类标识，匹配则显示选项，不匹配则隐藏
• 页面初始化时主动执行一次筛选，保证首次加载时产品选项就和默认选中的分类对齐
• 筛选完成后自动选中第一个可见的产品选项，避免提交时拿到已隐藏选项的异常值

完整实现代码如下：

// 获取下拉框DOM节点
const categorySelect = document.querySelector('#category');
const productSelect = document.querySelector('#product');

function filterProductOptions() {
  const currentCategory = categorySelect.value;
  // 遍历所有产品选项控制显隐
  for (const option of productSelect.options) {
    option.hidden = option.dataset.subtext !== currentCategory;
  }
  // 修正选中项，防止选中隐藏选项
  const firstValidOption = Array.from(productSelect.options).find(item => !item.hidden);
  if (firstValidOption) firstValidOption.selected = true;
}

// 绑定分类切换事件
categorySelect.addEventListener('change', filterProductOptions);
// 页面加载完成后执行初始筛选
document.addEventListener('DOMContentLoaded', filterProductOptions);

兼容说明 #

如果需要适配IE10及更早不支持option标签hidden属性的浏览器，可以调整筛选逻辑：提前把所有产品选项缓存到一个数组中，每次筛选时先清空产品下拉框，再把匹配当前分类的选项重新插入下拉框即可，核心判断逻辑和上述实现一致。

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