JavaScript切换表单选项清空div后AJAX填充内容代码失效问题

问题原因 #

• 下拉框的change事件仅实现了清空目标DIV内容的逻辑，没有关联AJAX加载新内容的步骤，切换选项后不会加载对应内容
• 现有AJAX判断逻辑仅在页面首次加载完成时执行一次，下拉选项变化后不会重新触发
• 两种选项的AJAX逻辑重复，可封装复用降低维护成本

修复后代码 #

// 封装加载内容的公共函数
function loadUebungContent(uebungsartVal) {
    const targetDiv = $('#zusatz-uebung');
    // 先清空原有内容
    targetDiv.empty();
    
    let requestUrl = '';
    if (uebungsartVal === 'bet') {
        requestUrl = 'helper/javascript-loadings/addOMT.php';
    } else if (uebungsartVal === 'omt') {
        requestUrl = 'helper/javascript-loadings/addBET.php';
    }
    // 匹配到对应请求地址再发请求
    if (requestUrl) {
        $.ajax({
            type: 'POST',
            url: requestUrl,
            success: function(response) {
                targetDiv.html(response);
            }
        });
    }
}

$(document).ready(function() {
    // 页面加载完成后，加载初始选中值对应的内容
    const initialVal = $('#uebungsart').val();
    loadUebungContent(initialVal);
    
    // 下拉选项变化时，加载新选中值对应的内容
    $(document).on('change', '#uebungsart', function() {
        const currentVal = $(this).val();
        loadUebungContent(currentVal);
    });
});

改动说明 #

• 封装公共加载函数，避免重复写AJAX逻辑，后续新增选项只要加对应判断即可
• 清空DOM的逻辑直接用jQuery提供的empty()方法即可，无需手动遍历删除子节点，写法更简洁
• 页面初始加载和下拉切换时都调用公共函数，保证两种场景下内容都能正常加载

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