基于前置下拉选择动态切换选项的Adaptive Card技术问询

当然可以实现这种根据前置下拉选择动态变更后续下拉选项的Adaptive Card，核心是利用Adaptive Card的可见性表达式或卡片更新机制，以下是具体实现方案：

方案1：前端静态联动（基于可见性表达式） #

直接在卡片中通过visible属性绑定父下拉控件的选中值，控制不同子下拉的显示/隐藏，适用于子选项固定的场景：

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "parentChoice",
      "label": "选择父选项",
      "choices": [
        {"title": "1", "value": "1"},
        {"title": "2", "value": "2"}
      ],
      "placeholder": "请选择"
    },
    // 对应父选项1的子下拉
    {
      "type": "Input.ChoiceSet",
      "id": "childChoiceA",
      "label": "子选项",
      "choices": [{"title": "A", "value": "A"}],
      "visible": "${parentChoice == '1'}"
    },
    // 对应父选项2的子下拉
    {
      "type": "Input.ChoiceSet",
      "id": "childChoiceB",
      "label": "子选项",
      "choices": [{"title": "B", "value": "B"}],
      "visible": "${parentChoice == '2'}"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "提交"
    }
  ]
}

逻辑说明 #

• 父下拉控件parentChoice的选中值会触发表达式判断
• 当选中值为1时，childChoiceA显示（仅含选项A）；选中值为2时，childChoiceB显示（仅含选项B）
• 该方案依赖Adaptive Card 1.0及以上版本的表达式语法支持，大部分主流渲染端（如Teams、Bot Framework）都兼容

方案2：动态加载子选项（基于卡片更新） #

如果子选项需要从后端动态获取（而非固定值），可以通过以下流程实现：

1. 用户选择父下拉选项后，触发Action.Submit提交选中值
2. 后端服务根据提交的父选项值，生成包含对应子选项的新Adaptive Card
3. 将新卡片返回给前端，替换原有卡片完成联动

这种方案适用于子选项需要动态生成的复杂场景，比如从数据库或API拉取选项列表。

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