基于另一选择框选项切换Contact Form 7下拉列表选项

你的代码在JSFiddle能正常运行但WordPress里失效，核心原因有三个：WordPress的jQuery冲突机制、Contact Form 7的动态渲染特性，以及原代码未处理切换回其他机构的场景。以下是完整修正方案：

1. 保留原CF7短代码（无需修改） #

<label> Institute
    [select* Institute id:if_cips_selection "Please choose..." "AAT" "CILT" "CIPD" "CIPS" "CMI" "ILM" "IoSCM"] </label>

<label> Level
    [select* Level id:cips_level  "Please choose..." "2" "3" "4" "5" "6" "7"] </label>

2. 修正后的JavaScript代码 #

// 监听CF7表单初始化事件，确保代码在表单渲染完成后执行
document.addEventListener('wpcf7init', function() {
    // 保存Level下拉框的原始选项，用于切换回其他机构时恢复
    const originalLevelOptions = jQuery('#cips_level').html();

    // 绑定Institute下拉框的变更事件
    jQuery('#if_cips_selection').on('change', function() {
        const selectedInstitute = jQuery(this).val();
        const levelSelect = jQuery('#cips_level');

        if (selectedInstitute === 'CIPS') {
            // 替换为仅显示2和3的选项，确保值与CF7短代码一致
            levelSelect.html(`
                <option value="">Please choose...</option>
                <option value="2">2</option>
                <option value="3">3</option>
            `);
        } else {
            // 切换回其他机构时恢复所有原始Level选项
            levelSelect.html(originalLevelOptions);
        }
    });
});

3. 代码添加方式（二选一） #

• 方式一：主题自定义JS面板
  进入WordPress后台 → 外观 → 自定义 → 自定义JS（不同主题位置可能略有差异），粘贴上述JS代码即可。
• 方式二：通过functions.php添加
  推荐使用子主题的functions.php（避免主题更新丢失代码），添加以下代码：

function cf7_institute_level_linkage() {
    ?>
    <script>
    document.addEventListener('wpcf7init', function() {
        const originalLevelOptions = jQuery('#cips_level').html();
        jQuery('#if_cips_selection').on('change', function() {
            const selectedInstitute = jQuery(this).val();
            const levelSelect = jQuery('#cips_level');
            if (selectedInstitute === 'CIPS') {
                levelSelect.html(`
                    <option value="">Please choose...</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                `);
            } else {
                levelSelect.html(originalLevelOptions);
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'cf7_institute_level_linkage');

关键修正说明 #

• jQuery冲突处理：WordPress默认启用jQuery的noConflict模式，不能直接用$，必须用jQuery调用方法。
• 动态表单适配：Contact Form 7可能动态渲染表单，使用wpcf7init事件替代$(document).ready，确保代码在表单加载完成后执行。
• 完整逻辑补全：新增切换回非CIPS机构时恢复原始选项的逻辑，避免用户切换后Level选项异常。
• 值一致性保证：确保选项的value与CF7短代码定义完全匹配，避免提交数据出错。

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