Chrome/Firefox正常的下拉列表过滤功能在Safari中失效求助

问题核心 #

你的过滤功能在Chrome、Firefox正常，但Safari无响应，本质原因是Safari不支持通过style.display属性控制<option>元素的显示/隐藏。Chrome和Firefox允许修改<option>的display样式，但Safari对表单控件的渲染规则更严格，会直接忽略display: none对<option>的作用。

修复方案1：使用hidden属性替代display样式 #

这是最简单的修复方式，直接把JS中设置style.display的逻辑改成操作<option>的hidden属性：

function filterDropdown() {
    // Get input value
    var input, filter, dropdown, options, i, txtValue;
    input = document.getElementById("filter");
    filter = input.value.toUpperCase();
    dropdown = document.getElementById("dropdown");
    options = dropdown.getElementsByTagName("option");

    // Loop through all options, hide those that don't match the filter
    for (i = 0; i < options.length; i++) {
        txtValue = options[i].text;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            options[i].hidden = false;
        } else {
            options[i].hidden = true;
        }
    }
}

修复方案2：动态重建选项列表（兼容旧版Safari） #

如果部分旧版Safari对hidden属性支持也有问题，可以采用动态生成选项的方式：

1. 先在页面加载时保存所有原始选项的数据：

// 全局变量存储原始选项信息
let originalClubOptions = [];

// 页面加载完成后初始化原始数据
document.addEventListener('DOMContentLoaded', function() {
    const dropdown = document.getElementById("dropdown");
    const options = dropdown.getElementsByTagName("option");
    
    for (let i = 0; i < options.length; i++) {
        originalClubOptions.push({
            value: options[i].value,
            text: options[i].text,
            league: options[i].dataset.league,
            isSelected: options[i].selected
        });
    }
});

2. 修改过滤函数，根据输入动态生成匹配的选项：

function filterDropdown() {
    var input, filter, dropdown;
    input = document.getElementById("filter");
    filter = input.value.toUpperCase();
    dropdown = document.getElementById("dropdown");

    // 清空当前下拉列表
    dropdown.innerHTML = '';

    // 遍历原始数据，添加匹配的选项
    originalClubOptions.forEach(opt => {
        if (opt.text.toUpperCase().indexOf(filter) > -1) {
            const newOption = document.createElement('option');
            newOption.value = opt.value;
            newOption.textContent = opt.text;
            newOption.dataset.league = opt.league;
            if (opt.isSelected) {
                newOption.selected = true;
            }
            dropdown.appendChild(newOption);
        }
    });
}

验证建议 #

先尝试方案1，大部分Safari版本都能正常生效；如果还是有问题，再切换到方案2，动态生成选项的方式兼容性最强。

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