Shiny自定义可悬停下拉菜单获取选中选项值为空异常排查

• 事件绑定逻辑错误：原有代码将点击事件绑定到下拉菜单的父容器#btn3上，取值时也取的是父容器的整体文本，无法捕获单个被点击选项的内容
• 未阻止<a>标签的默认跳转行为，可能引发页面不必要的锚点跳动

仅需要修改代码中的JavaScript逻辑部分，监听下拉选项（即#btn3下的<a>标签）的点击事件，取当前点击元素的文本即可，完整可运行代码如下：

library(shiny)

jscode <- '
$("#btn3 a").on("click", function(e){
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 取当前点击的选项文本传给Shiny
  Shiny.setInputValue("mydata", $(this).text());
})
'

ui <- fluidPage(
  HTML( 
    '<style>
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>

<div class="dropdown" id = "btn1">
  <button class="dropbtn" id = "btn2">Dropdown</button>
  <div id = "btn3" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
'),
  singleton(tags$script(HTML(jscode)))
)

server = function(input, output, session) {
  observeEvent(input$mydata, {
    print(paste("data is: ", input$mydata))
  })
}
runApp(list(ui = ui, server = server))

运行后点击任意下拉选项，控制台就会打印对应选中的内容。

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