首次点击长<select>下拉框定位指定选项的跨浏览器兼容方案求助

问题场景 #

现有取值范围为-100到100的长下拉选择框，原代码如下：

<select name="mySelect" id="mySelect" required="" >
        <option value="-100"  > -100% </option>
        <option value="-99"  > -99% </option>
        <option value="-98"  > -98% </option>
        <option value="0"  > 0% </option>
        <option value="101" selected = "" hidden = ""> ----- </option>
</select>

需求为首次点击该下拉框时，自动展开并定位选中预设值0。

原有实现的兼容问题 #

原有实现代码如下：

$('#mySelect').one('focus', function() {
    $(this).children('option[value=0]').prop('selected',true);
});

该实现仅在Chrome浏览器中运行正常，Firefox浏览器中仅能正确选中目标选项，下拉框不会自动滚动到该选项所在位置。

兼容Chrome、Firefox的解决方案 #

Firefox不自动滚动的核心原因是focus事件触发时，下拉选项列表还未完成渲染，直接设置selected属性无法触发滚动定位，调整后的实现代码如下：

$('#mySelect').one('mousedown', function() {
    const $zeroOpt = $(this).children('option[value=0]');
    // 先设置选中状态
    $zeroOpt.prop('selected', true);
    // 针对Firefox做显式滚动适配
    if (navigator.userAgent.includes('Firefox')) {
        setTimeout(() => {
            $zeroOpt[0].scrollIntoView({
                block: 'center'
            });
        }, 0);
    }
});

方案说明 #

• 触发事件从focus调整为mousedown，触发时机更早，和下拉框展开逻辑的时序更匹配
• 加入Firefox浏览器判断，使用setTimeout把滚动操作后置到下一个事件循环执行，确保下拉选项列表已经渲染完成再触发滚动
• 调用原生scrollIntoView方法显式滚动到目标选项，block: 'center'配置可让目标选项在下拉列表中居中展示，体验更优
• 保留one事件绑定逻辑，确保仅首次点击下拉框触发自动选中定位，不影响后续用户的自主选择操作

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