如何用原生JS实现下拉菜单选中后滚动页面仍自动更新显示文本

开发者阿泽

2026-10-18

问题根源

你现有的代码逻辑只修改了第一个option（id为dropdown-current）的文本，但原生<select>控件的展示内容是当前被选中的option的文本：

当你选中其他option后，展示的是对应选中项的文本，你修改第一个option的文本自然不会生效
只有你选中第一个「Select Section」选项时，展示内容刚好是你修改的第一个option的文本，所以功能看起来正常

修复方案

废弃修改单个option文本的逻辑，直接根据滚动位置设置<select>的选中值，控件会自动同步展示文本，同时删掉冗余的下拉点击事件逻辑即可。

修改后的核心代码

替换updateUrlOnScroll函数内容：

function updateUrlOnScroll() {
    window.onscroll = function() {
        const navDropdown = document.getElementById('nav-dropdown')
        let scrolly = window.scrollY + 114;
        let currentHash = '';

        if (scrolly < register.offsetTop) {
            currentHash = '#'
            count = 0;
        } else if (scrolly >= register.offsetTop && scrolly < pairing.offsetTop) {
            currentHash = '#register'
            count = setupInstructions.indexOf(register);
        } else if (scrolly >= pairing.offsetTop && scrolly < deviceUnlock.offsetTop) {
            currentHash = '#pairing'
            count = setupInstructions.indexOf(pairing);
        } else if (scrolly >= deviceUnlock.offsetTop) {
            currentHash = '#device-unlock'
            count = setupInstructions.indexOf(deviceUnlock);
        }

        // 直接设置下拉框选中值，自动同步显示文本
        navDropdown.value = currentHash;
        // 更新页面锚点
        updateNamedAnchor(currentHash.replace('#',''))
    };
}