Shiny中selectizeInput如何实现分组多选时每组仅可选一个元素

核心思路 #

通过selectize.js原生的前端事件钩子实现逻辑，完全避免服务端调用updateSelectizeInput，从根源解决下拉菜单自动收起的问题。不需要额外的服务端监听逻辑，所有规则通过selectizeInput的options参数配置即可实现。

完整实现代码 #

library(shiny)

ui <- fluidPage(
  selectizeInput("selInput", "默认多选",
                 choices=list(g1 = c(A="A",B="B"), 
                              g2 = c(C="C",D="D")),
                 multiple=T),
  
  selectizeInput("oneElementPerGroup", "每组仅选一个",
                 choices=list(g1 = c(A="A",B="B"), 
                              g2 = c(C="C",D="D")),
                 multiple=T,
                 options = list(
                   optgroupField = 'optgroup',
                   # 组件初始化时保存全量选项信息
                   onInitialize = I('function() {
                     this.allOptions = this.options;
                   }'),
                   # 选中值变化时触发分组限制逻辑
                   onChange = I('function(selectedVals) {
                     const self = this;
                     // 先重置所有选项的禁用状态
                     Object.values(self.allOptions).forEach(opt => opt.disabled = false);
                     
                     // 遍历已选中项，禁用同组其他选项
                     selectedVals.forEach(val => {
                       const targetGroup = self.allOptions[val].optgroup;
                       Object.values(self.allOptions).forEach(opt => {
                         if(opt.optgroup === targetGroup && opt.value !== val) {
                           opt.disabled = true;
                         }
                       });
                     });
                     // 刷新选项列表，第二个参数设为false避免关闭下拉菜单
                     self.refreshOptions(false);
                   }')
                 ))
)

server <- function(session, input, output) {
  # 服务端无需任何额外处理逻辑
}

shinyApp(ui = ui, server = server)

方案优势 #

• 交互无卡顿：所有逻辑在前端执行，没有服务端通信开销，不会触发下拉菜单自动收起
• 易维护：不需要硬编码分组判断规则，新增分组时无需修改逻辑，自动适配
• 体验友好：采用禁用同组选项的方式替代移除，用户可以直观看到分组内的所有可选内容

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