Umbraco 13表单下拉列表选项条件逻辑实现咨询

Umbraco Forms默认没有直接提供针对下拉选项的条件显示/隐藏功能，但可以通过两种方案实现你需要的需求：

方案一：自定义JavaScript实现动态选项切换 #

这是最快速落地的方式，通过监听第一个下拉框的选择事件，动态修改第二个下拉框的选项：

1. 给两个下拉字段添加自定义CSS类（比如parent-dropdown和child-dropdown），方便JS定位元素
2. 在表单的「自定义脚本」区域或页面全局脚本中添加以下逻辑：

// 定义父选项与子选项的映射关系
const optionMap = {
  'A': ['E', 'F'],
  'B': ['G', 'H'],
  'C': ['G', 'H']
};

// 获取下拉元素
const parentSelect = document.querySelector('.parent-dropdown select');
const childSelect = document.querySelector('.child-dropdown select');

// 备份第二个下拉框的所有原始选项
const originalOptions = Array.from(childSelect.options).map(opt => ({
  value: opt.value,
  text: opt.text,
  selected: opt.selected
}));

// 监听父下拉框的变化
parentSelect.addEventListener('change', () => {
  const selectedVal = parentSelect.value;
  const targetOpts = optionMap[selectedVal] || [];

  // 清空子下拉框
  childSelect.innerHTML = '';

  // 筛选并添加目标选项
  originalOptions.forEach(opt => {
    if (targetOpts.includes(opt.text)) {
      const newOption = document.createElement('option');
      newOption.value = opt.value;
      newOption.text = opt.text;
      newOption.selected = opt.selected;
      childSelect.appendChild(newOption);
    }
  });
});

// 页面加载时触发一次，确保初始状态正确
document.addEventListener('DOMContentLoaded', () => {
  parentSelect.dispatchEvent(new Event('change'));
});

方案二：自定义表单字段类型（集成后台配置） #

如果需要在Umbraco后台可视化配置选项映射关系，可以自定义下拉字段类型：

• 继承Umbraco内置的DropdownListField类
• 添加后台配置属性，用于设置父选项对应的子选项集合
• 在字段的前端渲染逻辑中，嵌入上述类似的JS逻辑，读取后台配置的映射规则

注意事项 #

• 动态修改选项后，需要确保Umbraco Forms的客户端验证仍能正常工作，可通过重新触发验证绑定实现
• 服务器端验证需同步配置，避免提交不符合规则的选项

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