Orbeon Forms：如何为下拉控件添加多个筛选值

一、Excel表格场景 #

• 选中目标单元格/列，点击菜单栏「数据」→「数据验证」
• 在弹出窗口里，「允许」选「序列」，「来源」框输入多个筛选值，用英文逗号分隔（例：已完成,进行中,待启动）
• 勾选「提供下拉箭头」后确定，就能得到带固定选项的下拉控件。如果要支持多选筛选，可借助VBA脚本：
  1. 按Alt+F11打开VBA编辑器，插入模块
  2. 粘贴以下代码（注意修改代码里的列号为你的目标列）：

  Private Sub Worksheet_Change(ByVal Target As Range)
      Dim OldValue As String
      Dim NewValue As String
      Application.EnableEvents = True
      On Error GoTo Exitsub
      If Target.Column = 1 Then ' 1代表目标列号，按需修改
          If Target.SpecialCells(xlCellTypeAllValidation) Is Nothing Then
              GoTo Exitsub
          Else: If Target.Value = "" Then GoTo Exitsub Else
              Application.EnableEvents = False
              NewValue = Target.Value
              Application.Undo
              OldValue = Target.Value
              If OldValue = "" Then
                  Target.Value = NewValue
              Else
                  If InStr(1, OldValue, NewValue) = 0 Then
                      Target.Value = OldValue & ", " & NewValue
                  Else
                      Target.Value = OldValue
                  End If
              End If
          End If
      End If
  Exitsub:
      Application.EnableEvents = True
  End Sub
  

  3. 保存文件为.xlsm格式（启用宏的工作簿），就能实现下拉多选筛选。

二、前端Web开发场景 #

原生HTML的<select>默认单选，要实现多筛选值，可按以下方式处理：

1. 原生HTML多选下拉 #

给<select>标签加multiple属性，还能通过size设置显示行数：

<select multiple size="3" name="filter">
  <option value="value1">筛选值1</option>
  <option value="value2">筛选值2</option>
  <option value="value3">筛选值3</option>
</select>

用户按住Ctrl（Windows）/Cmd（Mac）就能多选，提交表单时会返回所有选中值。

2. UI组件库快速实现（以Element UI为例） #

Vue项目里用Element UI的el-select，配合multiple和filterable属性，直接实现带搜索的多选筛选：

<el-select v-model="selectedValues" multiple filterable placeholder="请选择筛选值">
  <el-option
    v-for="item in filterOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</select>

export default {
  data() {
    return {
      selectedValues: [],
      filterOptions: [
        { value: 'value1', label: '筛选值1' },
        { value: 'value2', label: '筛选值2' },
        { value: 'value3', label: '筛选值3' }
      ]
    }
  }
}

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