如何在pickerInput开启多选时保留选择顺序？

问题 #

多选selectInput会严格按照用户选择的先后顺序返回结果，但pickerInput默认会将结果按原始选项的排序返回，导致两者行为不一致。例如：

• 先选Name 1再选Name 3：两者均输出Sunday;Tuesday
• 先选Name 3再选Name 1：selectInput输出Tuesday;Sunday，pickerInput仍输出Sunday;Tuesday

解决方案 #

通过配置pickerInput选项+自定义JS跟踪选择顺序，即可实现与selectInput完全一致的行为：

修改后的完整代码 #

library(shiny)
library(shinydashboard)
library(shinyWidgets)

choices_df = data.frame(
  names = c('Name 1', 'Name 2', 'Name 3'),
  id = c("Sunday","Monday","Tuesday")
)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    selectInput(
      "input",
      h5("selectInput（按选择顺序输出）"),
      choices = setNames(choices_df$id, choices_df$names),
      multiple = TRUE
    ),
    textOutput("output"),
    pickerInput(
      "input2",
      h5("pickerInput（按选择顺序输出）"),
      choices = setNames(choices_df$id, choices_df$names),
      multiple = TRUE,
      # 禁用自动排序，启用动作框（可选，支持手动拖动调整顺序）
      options = list(
        'sortable' = FALSE,
        'actions-box' = TRUE
      )
    ),
    textOutput("output2"),
    # JS监听选择变化，传递实际选择顺序到Shiny
    tags$script(HTML("
      $(document).on('change', '#input2', function() {
        const selectedOrder = [];
        $('#input2 option:selected').each(function() {
          selectedOrder.push($(this).val());
        });
        Shiny.setInputValue('input2_order', selectedOrder, {priority: 'event'});
      });
    "))
  )
)

server <- function(input, output, session) {
  output$output <- renderPrint({paste(input$input, collapse = ";")}) 
  
  output$output2 <- renderPrint({
    # 优先使用JS传递的顺序， fallback到原始值
    paste(input$input2_order %||% input$input2, collapse = ";")
  })
}

shinyApp(ui = ui, server = server)

核心要点 #

1. pickerInput配置：设置'sortable' = FALSE阻止组件自动排序选中项；'actions-box' = TRUE为可选配置，开启后允许用户手动拖动调整选中项的顺序。
2. JS跟踪顺序：监听pickerInput的change事件，遍历DOM中选中的选项，按实际选择顺序收集值，通过Shiny.setInputValue将顺序传递给服务器端的input$input2_order。
3. 服务器端输出：直接使用input$input2_order生成输出，确保结果顺序与用户选择完全一致。

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