jQuery/JS如何根据下拉菜单选中选项修改按钮点击函数，解决重复触发问题

每次下拉框触发change事件时，你都会给提交按钮新增一个点击事件监听器，之前绑定的监听器不会自动移除。多次切换下拉选项后，按钮上会同时绑定functionOne和functionTwo两个监听器，点击时就会同时触发两个函数。

提供两种可直接落地的实现方式： #

方案1：绑定新监听器前移除旧监听器 #

适配你现有的代码逻辑，每次切换下拉选项时先清空已绑定的点击事件，再绑定对应函数：

var btnsubmit = document.getElementById("submitbutton");

if (window.location.pathname=='/test/testpage.html') {
    $('#filter-list').on('change', function() {
        // 先移除所有已绑定的点击事件监听器
        btnsubmit.removeEventListener('click', functionOne);
        btnsubmit.removeEventListener('click', functionTwo);
        // 再绑定当前下拉值对应的函数
        if(this.value == '1'){
            btnsubmit.addEventListener('click', functionOne);
        } else if(this.value == '2'){
            btnsubmit.addEventListener('click', functionTwo);
        }
    });
}

方案2：仅绑定一次点击事件，触发时判断下拉值（更推荐） #

不需要监听下拉框的change事件，直接给提交按钮绑定一次点击事件，回调中读取当前下拉框的值再调用对应函数，从根源避免事件叠加问题：

if (window.location.pathname=='/test/testpage.html') {
    // 仅绑定一次提交按钮点击事件
    document.getElementById("submitbutton").addEventListener('click', function() {
        const currentSelectVal = document.getElementById("filter-list").value;
        if (currentSelectVal === '1') {
            functionOne();
        } else if (currentSelectVal === '2') {
            functionTwo();
        }
    });
}

这种实现逻辑更简洁，性能也更优，不需要反复执行事件绑定/解绑操作。

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