Chrome/Edge中双击select元素selectedIndex返回异常问题求助

问题根源 #

Chrome/Edge浏览器中，双击未选中的<option>时，双击事件的触发时机早于浏览器更新<select>的selectedIndex状态。第一次点击会选中选项，但双击事件执行时，selectedIndex还没完成同步，所以返回-1；而先单击选中后再双击，此时selectedIndex已有值，就能正常获取。Firefox的事件处理流程中状态更新更早，因此不存在这个问题。

修复方法 #

方法1：直接从点击目标获取索引（推荐） #

不依赖selectedIndex，通过事件对象拿到被双击的<option>元素，再计算它在选项列表中的索引，同时可手动同步选中状态：

<select id="jobs" multiple size="15" style="width: 150px; height: 280px">
    <option value="1">Day 1 - Sunday</option>
    <option value="2">Day 2 - Monday</option>
    <option value="3">Day 3 - Tuesday</option>
    <option value="4">Day 4 - Wednesday</option>
    <option value="5">Day 5 - Thursday</option>
    <option value="6">Day 6 - Friday</option>
    <option value="7">Day 7 - Saturday</option>
</select>
<script>
document.getElementById('jobs').addEventListener('dblclick', function(e) {
    if (e.target.tagName === 'OPTION') {
        const optionList = Array.from(this.options);
        const index = optionList.indexOf(e.target);
        alert(index);
        // 确保选项被选中（可选，根据需求调整）
        e.target.selected = true;
    }
});
</script>

方法2：延迟获取selectedIndex #

通过setTimeout让浏览器有足够时间更新选中状态后，再获取selectedIndex，改动最小：

<select id="jobs" multiple size="15" style="width: 150px; height: 280px" ondblclick="move('jobright');">
    <option value="1">Day 1 - Sunday</option>
    <option value="2">Day 2 - Monday</option>
    <option value="3">Day 3 - Tuesday</option>
    <option value="4">Day 4 - Wednesday</option>
    <option value="5">Day 5 - Thursday</option>
    <option value="6">Day 6 - Friday</option>
    <option value="7">Day 7 - Saturday</option>
</select>
<script>
function move(direction) {
    const source = document.getElementById('jobs');
    setTimeout(() => {
        alert(source.selectedIndex);
    }, 10);
}
</script>

说明 #

方法1更稳定，不依赖浏览器的内部处理时机；方法2适合快速修改现有代码，但延迟时间可能需要根据实际情况微调。

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