R Shiny中实现selectInput鼠标悬停展开下拉菜单的方法问询

你提到的点很准确：原生的selectInput()依赖浏览器原生的<select>控件，它的下拉触发逻辑是浏览器默认行为，确实没法通过Shiny的参数直接改成鼠标悬停触发。不过自定义<ul>元素并不是唯一的解决办法，还有更贴合Shiny生态的思路，包括利用Bootstrap组件来实现。

方法一：自定义HTML+CSS+JavaScript实现悬停下拉 #

这种方法完全自主控制交互逻辑，灵活性拉满。下面是一个可直接运行的示例：

library(shiny)

ui <- fluidPage(
  tags$style(HTML("
    .custom-select-container {
      position: relative;
      width: 200px;
    }
    .custom-select-trigger {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      background-color: white;
    }
    .custom-select-options {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      border: 1px solid #ccc;
      border-top: none;
      border-radius: 0 0 4px 4px;
      background-color: white;
      list-style: none;
      padding: 0;
      margin: 0;
      display: none;
      z-index: 1000;
    }
    .custom-select-container:hover .custom-select-options {
      display: block;
    }
    .custom-select-options li {
      padding: 8px 12px;
      cursor: pointer;
    }
    .custom-select-options li:hover {
      background-color: #f0f0f0;
    }
  ")),
  
  tags$div(class = "custom-select-container",
           tags$div(class = "custom-select-trigger", id = "selected-option", "选择选项"),
           tags$ul(class = "custom-select-options",
                   tags$li(data_value = "option1", "选项1"),
                   tags$li(data_value = "option2", "选项2"),
                   tags$li(data_value = "option3", "选项3")
           )
  ),
  
  verbatimTextOutput("selected_value")
)

server <- function(input, output, session) {
  # 监听选项点击事件，将值传递给Shiny输入
  observeEvent(input$custom_select_value, {
    output$selected_value <- renderPrint({
      paste("选中的值：", input$custom_select_value)
    })
  })
  
  # 添加JavaScript逻辑
  session$sendCustomMessage(type = "initCustomSelect", message = list())
}

# 添加JavaScript到UI
ui <- tagList(
  ui,
  tags$script(HTML("
    $(document).ready(function() {
      $('.custom-select-options li').click(function() {
        var selectedValue = $(this).attr('data_value');
        var selectedText = $(this).text();
        $('#selected-option').text(selectedText);
        // 将值发送给Shiny服务器
        Shiny.setInputValue('custom_select_value', selectedValue);
      });
    });
  "))
)

shinyApp(ui, server)

这个示例里，我们完全自定义了下拉控件的样式和交互，通过CSS的:hover伪类控制选项列表的显示/隐藏，再用JavaScript把选中的值同步到Shiny的输入对象中。

方法二：利用Bootstrap Dropdown组件实现悬停触发 #

Shiny默认集成了Bootstrap（不同版本对应Bootstrap 4或5），所以可以直接利用Bootstrap的Dropdown组件，只需要修改触发方式为鼠标悬停即可。下面是Bootstrap 5的示例：

library(shiny)

ui <- fluidPage(
  tags$style(HTML("
    /* 调整下拉菜单的样式，使其更接近selectInput */
    .bootstrap-select-container .btn {
      width: 200px;
      text-align: left;
    }
  ")),
  
  tags$div(class = "dropdown bootstrap-select-container",
           tags$button(class = "btn btn-secondary dropdown-toggle", 
                       type = "button", 
                       id="dropdownMenuButton", 
                       data-bs-toggle="dropdown",
                       aria-expanded="false",
                       "选择选项"),
           tags$ul(class = "dropdown-menu", aria-labelledby="dropdownMenuButton",
                   tags$li(tags$a(class = "dropdown-item", href="#", data_value = "option1", "选项1")),
                   tags$li(tags$a(class = "dropdown-item", href="#", data_value = "option2", "选项2")),
                   tags$li(tags$a(class = "dropdown-item", href="#", data_value = "option3", "选项3"))
           )
  ),
  
  verbatimTextOutput("selected_value")
)

server <- function(input, output, session) {
  observeEvent(input$bootstrap_select_value, {
    output$selected_value <- renderPrint({
      paste("选中的值：", input$bootstrap_select_value)
    })
  })
  
  # 添加悬停触发的JavaScript
  session$sendCustomMessage(type = "initBootstrapHoverDropdown", message = list())
}

ui <- tagList(
  ui,
  tags$script(HTML("
    $(document).ready(function() {
      // 监听鼠标悬停事件触发下拉
      $('.bootstrap-select-container').hover(function() {
        $(this).find('.dropdown-toggle').dropdown('show');
      }, function() {
        $(this).find('.dropdown-toggle').dropdown('hide');
      });
      
      // 监听选项点击
      $('.dropdown-item').click(function(e) {
        e.preventDefault();
        var selectedValue = $(this).attr('data_value');
        var selectedText = $(this).text();
        $('#dropdownMenuButton').text(selectedText);
        Shiny.setInputValue('bootstrap_select_value', selectedValue);
      });
    });
  "))
)

shinyApp(ui, server)

这个方法利用了Shiny自带的Bootstrap资源，不需要额外引入包，只需要通过JavaScript修改Dropdown的触发逻辑，让它在鼠标悬停时展开，点击时选中选项并同步值到Shiny输入。

总结 #

• 原生selectInput()确实无法直接修改触发逻辑，因为依赖浏览器原生控件；
• 自定义HTML/CSS/JS是可靠的方案，灵活性最高；
• Bootstrap完全适用于这个场景，而且Shiny默认集成了Bootstrap，不需要额外安装包，只需要调整组件的交互逻辑即可。

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