TYPO3 EXT:femanager：选中特定选项时显示隐藏文本框的实现

1. Fluid中基于选中值的条件判断 #

在重写的femanager表单模板（如New.html或Edit.html）中，通过{user.userType}获取当前选中的字段值，结合Fluid的<f:if>标签判断是否选中「other」选项，以此控制文本框的显示：

<!-- 自定义userType选择框 -->
<f:form.select property="userType" options="{femanager:form.getOptions(field:'userType')}" />

<!-- 联动显示的自定义输入框 -->
<f:if condition="{user.userType} == 'other'">
    <f:form.textfield property="userTypeCustom" placeholder="请输入自定义类型" />
</f:if>

注意：确保「other」选项的value属性值为'other'（与判断条件一致），如果你的选项值是其他内容，对应修改判断条件即可。

2. 选项变更时的实时交互（无需刷新表单） #

不需要刷新整个表单，通过JavaScript监听select的change事件，实时切换文本框的显示状态，同时页面初始化时也要执行一次判断，避免初始状态显示异常：

document.addEventListener('DOMContentLoaded', function() {
    const userTypeSelect = document.querySelector('select[name="user[userType]"]');
    const customInput = document.querySelector('input[name="user[userTypeCustom]"]');

    // 初始化判断
    toggleCustomInput(userTypeSelect.value);

    // 监听选项变更
    userTypeSelect.addEventListener('change', function() {
        toggleCustomInput(this.value);
    });

    // 显示/隐藏文本框的逻辑
    function toggleCustomInput(selectedValue) {
        if (selectedValue === 'other') {
            customInput.style.display = 'block';
        } else {
            customInput.style.display = 'none';
            // 可选：清空自定义输入框内容
            customInput.value = '';
        }
    }
});

若你的字段名称或表单结构有调整，需要对应修改querySelector的选择器，确保能正确获取到对应的表单元素。

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