如何通过其他元素触发展开HTML Select下拉选项？

问题原因 #

浏览器出于交互安全性和一致性的限制，不允许通过模拟click/focus这类事件直接触发原生<select>的下拉展开，所以你之前用dispatchEvent模拟事件的方案无法生效。

可行解决方案：使用showPicker() API #

现代浏览器提供了HTMLSelectElement.showPicker()方法，这是专门用来触发展开下拉选项的标准API，直接调用就能实现需求。

结合你的Vue代码，修改toggleDropdown函数即可：

const toggleDropdown = (index: number) => {
    const selectEl = document.getElementById(`select${index}`) as HTMLSelectElement;
    if (selectEl) {
        try {
            // 直接调用showPicker展开下拉
            selectEl.showPicker();
            dropdownOpen.value = true;
        } catch (err) {
            // 兼容不支持该API的旧浏览器（可选）
            console.error('当前浏览器不支持showPicker方法', err);
        }
    }
}

额外注意事项 #

• 你的自定义箭头元素已经添加了@click.stop，这个需要保留，避免点击箭头时触发<select>的blur事件，导致下拉刚展开就关闭。
• showPicker()的兼容性：Chrome 9+、Firefox 104+、Safari 15.4+，如果需要兼容更老的浏览器，推荐使用完全自定义的下拉组件（用<div>等元素模拟select的交互），而非依赖原生<select>。

针对你提供的原生JS示例的修改 #

如果是原生JS场景，同样用showPicker()即可：

function expand() {
    const el = document.getElementById(`selectbox`);
    if (el) {
        el.showPicker();
    }
}

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