如何实现表单保存后仍保留onchange的显示/隐藏效果

问题原因 #

当你点击保存后页面重新加载时，虽然绑定了下拉框的onchange事件，但页面初始化时并没有根据下拉框当前已选中的保存值执行显隐逻辑，所以所有字段默认都会显示，无法维持之前的状态。

解决方案 #

核心思路是：把显隐逻辑封装成可复用的函数，既在下拉框切换时调用，也在页面加载完成后主动调用一次，用保存后的下拉框值初始化字段状态。

步骤1：封装显隐逻辑为独立函数

把原本写在change事件里的一堆show()/hide()代码抽成单独的函数，接收下拉框选中值作为参数，同时用数组管理显隐字段，让代码更整洁易维护。

步骤2：页面初始化时主动执行显隐逻辑

在$(document).ready()里，除了绑定change事件，还要主动获取下拉框的当前值（保存后的选中值），调用封装好的函数初始化字段状态。

修改后的完整JS代码 #

$(document).ready(function(){
    // 封装显隐逻辑为可复用函数
    function toggleFieldsByPropertyType(selectedValue) {
        // 第一步：列出所有需要控制显隐的字段ID，先统一隐藏
        const allControlledFields = [
            '20','19','1176','1063','1177','1078','1179','1191','1192','1193',
            '1194','1195','1196','1197','1198','1199','1200','1201','1172','1202',
            '1203','1071','1211','1212','1204','1000','1084','1085','1087','1086',
            '1088','1091','1089','1013','1006','1138','1205','1061','1092','1206',
            '1207','1080','1136','1137','1167','1166','1181','1182','1183','1168',
            '1140','1141','1142','1143','1144','1145','1146','1147','1208','1170',
            '1095','1148','1093','1094','1057','7','1187','1186','1003','1044',
            '1209','1169','1005','1101','1002','1103','1104','1105','1106'
        ];
        allControlledFields.forEach(fieldId => $(`#${fieldId}`).hide());

        // 第二步：根据选中值显示对应字段
        if(selectedValue === "Apartment"){
            const showFields = [
                '20','19','1176','1063','1177','1078','1179','1191','1192','1193',
                '1091','1006','1080','1136','1137','1167','1166','1181','1182','1183',
                '1168','1140','1141','1142','1143','1144','1145','1146','1147','1170',
                '1095','1148','1092','1093','1094','1057','1186','1169','1005'
            ];
            showFields.forEach(fieldId => $(`#${fieldId}`).show());
        } else if(selectedValue === "Villa"){
            // 示例：添加其他类型的显隐规则
            const showFields = ['1194','1195','1071'];
            showFields.forEach(fieldId => $(`#${fieldId}`).show());
        }
        // 继续添加其他下拉选项的else if分支
    }

    // 获取控制显隐的下拉框元素
    const propertySelect = $('#inputOption_1_2');

    // 绑定下拉框切换事件
    propertySelect.on('change', function(){
        toggleFieldsByPropertyType($(this).val());
    });

    // 页面加载完成后，用当前选中值初始化字段显隐状态
    toggleFieldsByPropertyType(propertySelect.val());
});

关键注意事项 #

1. 确保下拉框选中值正确回显：你的PHP代码要保证保存后，下拉框的selected属性正确设置为保存的值，这样propertySelect.val()才能拿到正确的初始化值。
2. 字段ID准确性：确认allControlledFields和showFields里的字段ID和你页面上的元素ID完全一致，避免因为ID拼写错误导致显隐失效。
3. 默认状态处理：先统一隐藏所有受控字段再显示需要的，避免出现字段状态残留的问题。

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