Edge浏览器中下拉框change事件失效问题求助

你的问题核心出在两个关键点：

1. 重复绑定change事件：每次点击搜索按钮都会给#comingDueIds绑定新的change事件，Edge浏览器对重复事件的处理机制和IE11不同，多次绑定后会导致事件触发异常，甚至选中特定选项后彻底失效。
2. 闭包变量与无效值处理缺失：dropdownUpdate函数依赖点击搜索时生成的duesdates变量，后续change事件触发时使用的是旧值；另外选中第一项（空值）时，parseInt得到NaN，导致日期计算失效，进而引发DOM操作异常，间接影响事件触发。

修复步骤 #

• 将change事件绑定移到搜索按钮的click事件外部，确保只绑定一次。
• 在dropdownUpdate内部实时获取下拉框的选中值并计算目标日期，避免依赖旧的闭包变量。
• 增加空值判断，当选中第一项时默认显示所有行，避免NaN导致的逻辑错误。

修正后的JavaScript代码

// 独立定义下拉更新函数，确保逻辑不受外部作用域干扰
function dropdownUpdate() {
    const comingDueVal = $("#comingDueIds option:selected").val();
    // 处理空值情况：默认显示所有行
    if (!comingDueVal) {
        $('.table tbody tr').show();
        return;
    }
    const comingDue = parseInt(comingDueVal, 10);
    const duedate = new Date();
    duedate.setDate(duedate.getDate() + comingDue);
    const duesdates = Date.parse(duedate);
    
    $('.table tbody tr').each(function () {
        const comingDates = $(this).find('td').eq(2);
        const dates = comingDates[0].childNodes[2].innerText;
        const dueDate = Date.parse(dates);
        // 仅当日期解析有效时执行toggle逻辑
        $(this).toggle(!isNaN(dueDate) && dueDate <= duesdates);
    });
}

// 搜索按钮点击事件：仅触发一次更新，不再重复绑定事件
$("#btn-search").click(function () {
    dropdownUpdate();
});

// 只绑定一次change事件，彻底解决重复绑定引发的异常
$('#comingDueIds').on('change', dropdownUpdate);

对应的HTML代码（保持原结构即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="comls" id="comingDueIds" style="width: 140px;">
    <option value="" selected="selected">Days</option>
    <option value="5">5 Days</option>
    <option value="10">10 Days</option>
    <option value="15">15 Days</option>
    <option value="20">20 Days</option>
    <option value="25">25 Days</option>
</select>

关键修改说明 #

1. 事件绑定优化：把change事件绑定移到全局作用域，只执行一次，彻底解决重复绑定导致的Edge事件异常。
2. 实时变量计算：在dropdownUpdate内部实时获取当前下拉框选中值，每次change或点击搜索时都重新计算目标日期，避免闭包带来的旧值问题。
3. 空值与异常处理：
   • 选中空值时直接显示所有行，避免NaN引发的日期计算错误。
   • 增加!isNaN(dueDate)判断，确保只有有效的日期值才执行toggle逻辑，防止无效DOM操作影响浏览器事件机制。
4. 代码结构拆分：将更新逻辑独立成函数，提高可读性和可维护性，避免在click事件内部嵌套函数导致的作用域混乱。

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