Adaptive Card条件渲染问题：如何根据选中国家动态显示城市选项

核心思路 #

要实现「选国家后动态显示对应城市」，需要结合Input.ChoiceSet的选择事件监听+条件可见性（$when表达式），或者直接通过JS动态更新Card内容。以下是两种可行方案：

方案1：使用Adaptive Card原生条件可见性（推荐，适合静态预定义城市列表） #

步骤1：定义带状态的Card结构 #

在JSON里给国家选择器设置唯一id，然后给每个城市组添加$when条件，判断当前国家选择值：

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "selectedCountry",
      "label": "选择国家",
      "choices": [
        { "title": "中国", "value": "CN" },
        { "title": "美国", "value": "US" },
        { "title": "日本", "value": "JP" }
      ]
    },
    // 中国城市组
    {
      "type": "Input.ChoiceSet",
      "id": "selectedCityCN",
      "label": "选择城市",
      "choices": [
        { "title": "北京", "value": "BEIJING" },
        { "title": "上海", "value": "SHANGHAI" }
      ],
      "$when": "${selectedCountry == 'CN'}"
    },
    // 美国城市组
    {
      "type": "Input.ChoiceSet",
      "id": "selectedCityUS",
      "label": "选择城市",
      "choices": [
        { "title": "纽约", "value": "NYC" },
        { "title": "洛杉矶", "value": "LA" }
      ],
      "$when": "${selectedCountry == 'US'}"
    },
    // 日本城市组
    {
      "type": "Input.ChoiceSet",
      "id": "selectedCityJP",
      "label": "选择城市",
      "choices": [
        { "title": "东京", "value": "TOKYO" },
        { "title": "大阪", "value": "OSAKA" }
      ],
      "$when": "${selectedCountry == 'JP'}"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "提交"
    }
  ]
}

关键注意点 #

• 必须使用Adaptive Card v1.0+版本（v1.5对表达式支持更完善）
• 确认宿主环境支持$when条件渲染（比如Teams、Bot Framework、Adaptive Cards JS SDK）
• 每个城市组的id必须唯一，避免提交时数据冲突

方案2：通过JS SDK动态更新Card（适合动态加载城市数据） #

如果城市列表需要从后端获取，或者需要更灵活的控制，用Adaptive Cards JS SDK监听选择事件：

步骤1：初始化Card并绑定事件 #

// 引入Adaptive Cards SDK
import * as AdaptiveCards from "adaptivecards";

// 基础Card结构（仅保留国家选择器）
const baseCardJson = {
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "selectedCountry",
      "label": "选择国家",
      "choices": [
        { "title": "中国", "value": "CN" },
        { "title": "美国", "value": "US" },
        { "title": "日本", "value": "JP" }
      ]
    }
  ],
  "actions": [{"type": "Action.Submit", "title": "提交"}]
};

// 初始化并渲染Card
const card = new AdaptiveCards.AdaptiveCard();
card.parse(baseCardJson);
const cardContainer = document.getElementById("cardContainer");
cardContainer.appendChild(card.render());

// 监听国家选择变化
card.addEventListener("change", (event) => {
  if (event.target.id !== "selectedCountry") return;
  
  const selectedCountry = event.target.value;
  // 移除现有城市选择器
  const existingCityInput = card.getElementById("selectedCity");
  if (existingCityInput) {
    card.body.splice(card.body.indexOf(existingCityInput), 1);
  }
  // 根据选择的国家加载对应城市
  let cityChoices = [];
  switch(selectedCountry) {
    case "CN":
      cityChoices = [{"title":"北京","value":"BEIJING"}, {"title":"上海","value":"SHANGHAI"}];
      break;
    case "US":
      cityChoices = [{"title":"纽约","value":"NYC"}, {"title":"洛杉矶","value":"LA"}];
      break;
    case "JP":
      cityChoices = [{"title":"东京","value":"TOKYO"}, {"title":"大阪","value":"OSAKA"}];
      break;
  }
  // 添加新的城市选择器
  if (cityChoices.length > 0) {
    const cityInput = new AdaptiveCards.InputChoiceSet();
    cityInput.id = "selectedCity";
    cityInput.label = "选择城市";
    cityInput.choices = cityChoices;
    card.body.push(cityInput);
    // 重新渲染Card
    cardContainer.innerHTML = "";
    cardContainer.appendChild(card.render());
  }
});

关键注意点 #

• 确保正确引入Adaptive Cards JS SDK
• 动态更新后需重新渲染Card，否则界面不会同步变化

常见问题排查 #

• 条件不生效：检查$when表达式语法，变量名必须和Input的id完全一致，字符串值要加单引号
• 宿主不支持条件渲染：部分旧版宿主可能不支持$when，此时只能用JS动态更新方案
• 提交数据异常：多个城市组id重复会导致数据覆盖，必须保证每个城市组id唯一，或提交时通过逻辑判断取对应值

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