Symfony 5 如何实现根据用户选择动态显隐表单字段

问题原因 #

你的代码存在2个核心错误导致功能不生效：

1. 没有给选项字段绑定change事件监听，仅单次执行的if判断只能在页面加载时运行一次，不会响应用户的选择操作
2. 选择器拼写错误，你给attending字段设置的class是attendanceStatus，不是.attending，且不能直接将选择器字符串和布尔值做比较，需要先获取到表单元素的实际选中值

正确实现方案 #

使用原生JavaScript即可实现，不需要额外依赖，代码如下：

document.addEventListener('DOMContentLoaded', function () {
    // 获取对应的DOM元素
    const attendingField = document.querySelector('.attendanceStatus');
    const guestBlock = document.getElementById('guest');

    // 切换宾客区块显隐的公共方法
    function toggleGuestSection() {
        // 你在FormType中给yes选项配置的值为true，渲染到HTML后对应value为"1"
        if (attendingField.value === '1') {
            guestBlock.style.display = 'block';
        } else {
            guestBlock.style.display = 'none';
        }
    }

    // 绑定选择变更事件
    attendingField.addEventListener('change', toggleGuestSection);
    // 页面加载时先执行一次，兼容表单回显场景
    toggleGuestSection();
});

特殊场景适配 #

如果你给attending字段配置了expanded => true渲染为单选按钮组，修改取值逻辑即可：

function toggleGuestSection() {
    const selectedVal = document.querySelector('.attendanceStatus:checked')?.value;
    guestBlock.style.display = selectedVal === '1' ? 'block' : 'none';
}

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