Question

我使用带有bootstrap下拉列表的index.html开发了我的UI：

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="shared/shiny.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="shared/shiny.css" type="text/css" />
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">                                            Selection<span class="caret"></span></button>
        <ul id="selected" class="dropdown-menu">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </div>
      <div>
        <pre id="selection" class="shiny-text-output"></pre>
      </div>
    </body>

我想通过将下拉列表中的选定值传递给server.R然后在UI中将其打印出来。 server.R：

shinyServer(function(input, output) {
  # print selected option
  output$selection <- renderPrint({
    print(input$selected)
  })
})

我可以使用基本的Shiny小部件来做到这一点，但我想以不同的方式尝试这个。我还可以使用更基本的HTML选择类型：

<select name="selected">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>

我理解使用value=""将所选值传递给server.R。但我想知道如何使用引导按钮类来做到这一点。我是否需要将单击事件绑定到选定的li并将所选文本传递给server.R。如果是这样，我该怎么做？

Answer 1

不完整的答案，但我认为它对你有帮助。

1）见Shiny.onInputChange(

2）你需要在像

这样的js中使用它

$(document).ready(function () {
 $('#selected').on('change', function () {
Shiny.onInputChange('selected',$(this).attr('value') );
})
})

3）您可以在服务器端observeEvent(input$selected,...

上使用它

Answer 2

我将js代码放在一个名为app.js的单独文件中：

$(document).ready(function () {
     $("#selected li a").on("click", function () {
      Shiny.onInputChange('selectedvalue', $(this).text());
     });
    });

在服务器上。我用过：

output$selection <- renderText({
    if (is.null(input$selectedvalue)) 
      return()
    input$selectedvalue
  })

将Bootstrap下拉列表中的选定值传递给Shiny

2 个答案: