如何解决Safari浏览器中隐藏下拉选项DOM元素不生效的问题

Safari的WebKit内核对原生<select>控件的<option>子元素的display: noneCSS属性存在兼容性限制，系统渲染的下拉面板会忽略该属性继续展示所有选项，属于浏览器原生实现差异，并非代码逻辑错误。
同时原代码还存在两处可优化问题：

• 没有做选项重置逻辑，选中值修改后之前隐藏的选项无法恢复显示
• 全局变量泄漏：外层循环的i没有用let/const声明，且和内层循环变量重名，可能导致逻辑异常

推荐使用hidden属性 + disabled属性组合实现隐藏效果，是目前原生控件下兼容性最好的方案，修改后完整代码如下：

$(document).ready(function() {
  const sectionClass = [".question_1", ".question_2"];
  // 修正循环变量声明避免重名和全局泄漏
  for (let groupIdx = 0; groupIdx < sectionClass.length; groupIdx++) {
    const selectList = $(sectionClass[groupIdx]).find("select");

    // 简化事件绑定写法
    selectList.on('change', disabler);

    function disabler() {
      // 第一步：先重置所有option为可选中状态
      selectList.find('option').prop({
        hidden: false,
        disabled: false
      }).css('display', 'block');

      // 第二步：收集当前组内所有已选中的值
      const selectedValues = [];
      selectList.each(function() {
        const val = $(this).val();
        if (val) selectedValues.push(val);
      });

      // 第三步：隐藏同组内其他下拉中已被选中的option
      selectList.each(function() {
        const currentSelectVal = $(this).val();
        $(this).find('option').each(function() {
          const optVal = $(this).val();
          // 保留当前下拉的选中项可见，其他下拉的相同值隐藏
          if (optVal !== currentSelectVal && selectedValues.includes(optVal)) {
            $(this).prop({
              hidden: true,
              disabled: true
            }).css('display', 'none');
          }
        });
      });
    }
  }
});

如果需要完全一致的视觉隐藏效果，不受原生控件限制，可以选择两种实现方式：

• 替换为自定义模拟的下拉组件，完全用div/css/js实现下拉逻辑，不受浏览器原生控件渲染规则限制
• 每次变更时动态生成option列表，直接过滤掉已选中的值后重新赋值给对应select元素

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