GravitForms多步表单如何强制触发select下拉的onChange事件

问题原因 #

你遇到的问题本质是Gravity Forms分步表单翻页时会销毁重建当前页的DOM元素，你首次加载第一页时绑定的change事件监听，在返回第一页时已经随旧DOM失效了，所以修改下拉值后没有触发同步逻辑，不是change事件本身没有触发。

方案1：修复监听失效问题（推荐） #

使用事件委托把监听绑定到不会被销毁的上层节点（比如document），不受分页DOM重建影响，代码如下：

document.addEventListener("change", function(e) {
    // 匹配目标下拉框元素
    if (e.target.id !== "input_4_3") return;
    const selectValue = e.target.value;
    document.getElementById("date_left").innerHTML = selectValue;
    // 第二页元素不存在时跳过赋值避免报错
    const targetInput = document.getElementById("input_4_33");
    if (targetInput) targetInput.value = selectValue;
    console.log(selectValue);
});

同时可以配合Gravity Forms自带的分页加载事件，在跳转到第二页时主动同步一次值，避免极端场景下的不同步：

// formId对应你的表单ID 4，currentPage对应第二页的页码，可根据实际情况调整
document.addEventListener("gform_page_loaded", function(event, formId, currentPage) {
    if (formId === 4 && currentPage === 2) {
        const selectValue = document.getElementById("input_4_3").value;
        document.getElementById("date_left").innerHTML = selectValue;
        document.getElementById("input_4_33").value = selectValue;
    }
});

方案2：手动强制触发change事件 #

如果确实有需要主动触发下拉框change事件的场景，可使用以下代码：

const selectEl = document.getElementById("input_4_3");
if (selectEl) {
    // 构造冒泡的change事件
    const changeEvent = new Event("change", { bubbles: true });
    selectEl.dispatchEvent(changeEvent);
}

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