JavaScript获取select下拉框选中值不更新如何解决？

你代码里的specifiedNote、majorMinor、mode三个变量是在页面初始化阶段就赋值的常量，存储的是页面刚加载时三个下拉框的初始选中值，后续下拉框选项修改不会自动更新这三个常量的值，所以定时打印的永远是初始值。

方案1：保留定时打印逻辑，每次取值时实时获取 #

不需要提前存储下拉框值，在定时回调里每次都拉取最新的选中值即可：

setInterval(()=>{
    const specifiedNote = document.querySelector('#keys').value;
    const majorMinor = document.querySelector('#types').value;
    const mode = document.querySelector('#modes').value;
    console.log(specifiedNote, majorMinor, mode);
}, 4000);

方案2：更推荐的优化方案，无需轮询 #

监听下拉框的change事件，只有选项变更时才触发逻辑，性能更高，也更符合旋律生成工具的使用场景：

// 封装公共的参数获取方法，后续生成旋律时可以直接复用
function getSelectedParams() {
    return {
        specifiedNote: document.querySelector('#keys').value,
        majorMinor: document.querySelector('#types').value,
        mode: document.querySelector('#modes').value,
        noteAmount: document.querySelector('#amount').value
    }
}

// 监听所有下拉框变更事件，选项修改时自动拿到最新值
document.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', () => {
        const params = getSelectedParams();
        console.log(params.specifiedNote, params.majorMinor, params.mode);
        // 后续生成旋律的逻辑可以直接在这里调用
    })
})

// 如果是点击生成按钮才生成旋律，直接在按钮点击事件里取最新值即可
document.querySelector('.create').addEventListener('click', () => {
    const params = getSelectedParams();
    console.log('生成旋律参数：', params);
    // 调用旋律生成方法，传入params参数即可
})

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