SurveyJS实现静态下拉菜单的级联筛选功能

概述

在问卷设计工具SurveyJS中，开发者经常需要实现下拉菜单之间的级联筛选功能。这种功能允许第二个下拉菜单的选项根据第一个下拉菜单的选择动态变化，为用户提供更加精准和相关的选项。

实现原理

SurveyJS通过visibleIf条件表达式来实现这种级联筛选功能。visibleIf可以应用于整个问题或者单个选项，控制它们的显示与隐藏。当我们需要实现下拉菜单的级联关系时，可以在第二个下拉菜单的各个选项上设置visibleIf条件，使其仅当第一个下拉菜单选择特定值时才会显示。

具体实现方法

以下是一个完整的JSON配置示例，展示了如何实现两个静态下拉菜单的级联筛选：

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "dropdown",
          "name": "question1",
          "choices": [
            "test_1",
            "test_2",
            "test_3"
          ]
        },
        {
          "type": "dropdown",
          "name": "question2",
          "visibleIf": "{question1} notempty",
          "choices": [
            {
              "value": "op1",
              "visibleIf": "{question1} = 'test_1'"
            },
            {
              "value": "op2",
              "visibleIf": "{question1} = 'test_1'"
            },
            {
              "value": "op3",
              "visibleIf": "{question1} = 'test_1'"
            },
            {
              "value": "op4",
              "visibleIf": "{question1} = 'test_2'"
            },
            {
              "value": "op5",
              "visibleIf": "{question1} = 'test_2'"
            },
            {
              "value": "op6",
              "visibleIf": "{question1} = 'test_3'"
            },
            {
              "value": "op7",
              "visibleIf": "{question1} = 'test_3'"
            }
          ]
        }
      ]
    }
  ]
}

代码解析

1. 第一个下拉菜单(question1)：这是一个基本的下拉菜单，包含三个静态选项：test_1、test_2和test_3。

2. 第二个下拉菜单(question2)：

   • 设置了visibleIf: "{question1} notempty"，表示只有当question1有选择值时才会显示
   • 每个选项都配置了自己的visibleIf条件，例如：
     • op1、op2、op3仅在question1选择test_1时显示
     • op4、op5仅在question1选择test_2时显示
     • op6、op7仅在question1选择test_3时显示

应用场景

这种级联下拉菜单特别适用于以下场景：

• 地区选择（先选省份，再显示对应的城市）
• 产品分类（先选大类，再显示小类）
• 条件筛选（先选条件类型，再显示具体条件值）

注意事项

1. 确保第一个下拉菜单的选项值与第二个下拉菜单条件中的值完全匹配（包括大小写）
2. 可以为第二个下拉菜单设置默认值，但要注意默认值必须符合当前筛选条件
3. 考虑添加清除或重置按钮，方便用户重新选择
4. 对于复杂的级联关系，可以考虑使用动态数据源而非静态选项

通过这种实现方式，可以创建出交互性强的问卷表单，提升用户体验和数据收集的准确性。