Drupal9中如何根据下拉选择动态显隐内容页字段与标签页

Drupal 9 原生支持这类表单动态联动，完全可以实现你要的效果，不管是普通字段、必填字段还是编辑页的垂直标签页，都能按下拉选项的值动态显隐，核心自带的表单API已经处理了隐藏字段的必填校验跳过问题，不用额外写逻辑绕校验。

方案一：低代码配置（绝大多数场景推荐） #

不需要写自定义代码，用两个社区常用的贡献模块就能搞定：

• 先安装Field Group和Field States UI两个模块：前者用来把字段整理成分组的垂直标签页，也就是你参考案例里看到的标签页结构；后者把Drupal核心的表单状态配置可视化，不用写代码就能给字段、字段组加显隐规则。
• 配置步骤：
  1. 先确认作为触发条件的下拉字段机器名，比如案例里用来选LP类型的字段，后续规则都基于这个字段的值判断
  2. 进入对应内容类型的「管理表单显示」页面，找到所有需要控制显隐的字段、以及对应标签页的字段组（标签页本质就是Field Group生成的Vertical Tab类型分组，和普通字段一样可以加配置规则）
  3. 逐个给需要控制的元素加可见性规则：
     • 下拉选"A"时：给需要隐藏的字段、标签页加「隐藏」规则，核心会自动跳过这些隐藏字段的必填校验，不会阻止表单提交
     • 下拉选"B"时：给A组专属字段加隐藏规则，给B组专属字段加显示规则
     • 下拉选"None"时：不配置任何隐藏规则，所有字段、标签页默认全展示
• 效率提示：控制标签页显隐的时候，直接给整个标签页对应的字段组加规则就行，组内所有字段会跟着一起隐藏/显示，不用给每个字段重复配置。配置完清缓存，就能达到参考效果：选Gated Content时，仅保留Banner、SEO、Location三个标签页，其余自动隐藏。

方案二：自定义代码（适合复杂联动场景） #

如果你的显隐规则有额外的复杂判断条件，可以直接在自定义模块里用hook_form_alter调用核心的#states API实现，不需要额外写前端JS，核心自带的states.js会自动处理前端的显隐动效，示例代码：

/**
 * 对落地页内容类型的编辑表单加联动规则
 */
function mycustom_module_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  // 仅在machine name为landing_page的内容类型新增/编辑页生效
  if (!in_array($form_id, ['node_landing_page_form', 'node_landing_page_edit_form'])) {
    return;
  }

  // 示例：控制非Gated Content专属的标签页，选中Gated Content时隐藏
  $form['group_other_tabs']['#states'] = [
    'invisible' => [
      ':input[name="field_lp_type"]' => ['value' => 'gated_content'],
    ],
  ];

  // 示例：选中B选项时，才把B专属字段设为必填
  $form['field_b_only_field']['widget']['#states']['required'] = [
    ':input[name="field_lp_type"]' => ['value' => 'B'],
  ];
}

踩坑提示：写自定义规则的时候，开浏览器开发者工具看下表单里触发字段的实际name属性、以及各个字段组在表单数组里的键名，不要写错选择器。用Claro、Seven这类Drupal官方默认后台主题的话，不需要额外写样式处理标签页隐藏后的布局问题，核心脚本已经兼容。

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