简体   繁体   English

Shiny R:更改 selectInput 的边框颜色

[英]Shiny R: Change border color of selectInput

I am creating a rather reactive app that has a few numericInput variables and some selectInput variables.我正在创建一个相当被动的应用程序,它有一些numericInput变量和一些selectInput变量。

As the variables are quite many and they are used to estimate interventions, I am introducing colours to denote those variables that are different from the default.由于变量相当多,而且它们用于估计干预措施,因此我引入了颜色来表示那些与默认值不同的变量。 I have already implemented this with the help of @BigDataScientist in this question.这个问题中,我已经在@BigDataScientist 的帮助下实现了这一点 A MWE is presented:提供了一个 MWE:

library(shiny)
library(shinyjs)
ui<-shinyUI(
  fluidPage(
    useShinyjs(),
    numericInput("V1", "MyV1" , value = 5, min = 0, max= 100, step = 0.01),
    numericInput("V2", "MyV2" , value = 23, min = 0, max= 100, step = 0.01),
    selectInput("V3" , "MyV3" , selected = 1 , choices=c("Yes" = 1,"No" = 0))
  )
)
#
server<-shinyServer(function(input, output) {
  observe({
    if(!is.na(input$V1) & input$V1 != 5){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V1').style.border ='", color ,"'"))
    if(!is.na(input$V2) & input$V2 != 23){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V2').style.border ='", color ,"'"))
    if(!is.na(input$V3) & input$V3 != 1){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V3').style.borderColor ='", color ,"'"))
    })
  })
#
shinyApp(ui,server)

As you can see in the following figure, my code works for the numeric values, however it does not for the select input variable (on an interactive environment at least).如下图所示,我的代码适用于数值,但不适用于 select 输入变量(至少在交互式环境中)。

我的例子

Now it is not that the condition does not work, it is evaluated and the runjs runs.现在不是条件不起作用,它被评估并且runjs运行。

Additionally, as you can see in the following js snippet, the js command is just fine.此外,正如您在以下 js 代码段中看到的,js 命令很好。 There is probably the way to make it reactive ( without a submit button exactly as the numericInput ) that I miss.可能有一种方法可以使它具有反应性(没有与 numericInput 完全一样的提交按钮),我想念它。

 <!DOCTYPE html> <html> <body> <select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option> </select> <p>Click the button to change the style of the H1 element.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("mySelect").style.borderColor = "red"; } </script> </body> </html>

Do you have any suggestions?你有什么建议吗?

You don't need selectize.js so you can do:你不需要selectize.js所以你可以这样做:

selectInput("V3" , "MyV3" , selected = 1 , choices=c("Yes" = 1,"No" = 0), 
            selectize = FALSE)

This gives an "ordinary" select input.这给出了一个“普通”的选择输入。

Next I've tried your code with color <- "red" and this works.接下来我用color <- "red"尝试了你的代码,这有效。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM