如何使用列表框获取输入值？

Posted 2023-03-24

【中文标题】如何使用列表框获取输入值？

【英文标题】：How to get input values with list boxes?

【发布时间】：2021-01-16 18:48:46

【问题描述】：

我想在闪亮的应用程序中使用双面多选框（也称为列表框）。我发现了一个看起来很有希望的 jQuery 多选库：https://crlcu.github.io/multiselect/#。我用这个库做了一个闪亮的应用程序。

它似乎运行良好，但仅当在右侧框中选择项目时才会显示输入。理想情况下，我希望项目在输入到右侧框中后立即被选中。

jquery 依赖可以在这里找到：https://raw.githubusercontent.com/crlcu/multiselect/master/dist/js/multiselect.js

library(shiny)

# function for make UI html
MultiselectHTML <- function(mylist, myname) 
    paste_sum <- ""
    for (i in 1:length(mylist)) 
        paste_sum <- paste0(paste_sum, "<option value=", i, ">", mylist[i], "</option>")
    
    
    # make tag list
    tagList(div(class = "item_search",
                div(
                    class = "row",
                    div(
                        class = "col-xs-5",
                        tags$select(
                            name = "from[]",
                            id = myname,
                            class = "form-control",
                            multiple = "multiple",
                            size = "8",
                            HTML(paste_sum)
                        )
                    ),
                    div(
                        class = "col-xs-2",
                        tags$button(
                            type = "button",
                            class = "btn btn-primary btn-block",
                            id = paste0(myname, "_undo"),
                            "undo"
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_rightAll"),
                            tags$i(class = "glyphicon glyphicon-forward")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_rightSelected"),
                            tags$i(class = "glyphicon glyphicon-chevron-right")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_leftSelected"),
                            tags$i(class = "glyphicon glyphicon-chevron-left")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_leftAll"),
                            tags$i(class = "glyphicon glyphicon-backward")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-warning btn-block",
                            id = paste0(myname, "_redo"),
                            "redo"
                        )
                    ),
                    div(
                        class = "col-xs-5"
                        ,
                        tags$select(
                            name = "to[]",
                            id = paste0(myname, "_to"),
                            class = "form-control" ,
                            size = "8",
                            multiple = "multiple"
                        )
                    )
                )), 
            br())


ui <- fluidPage(
    tags$head(includeScript("www/multiselect.js")),
    tags$script(
        HTML(
            'jQuery(document).ready(function($) 
               $("#multiselect1").multiselect(
                 search: 
                 left: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 right: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 ,
                 fireSearch: function(value) 
                   return value.length >= 1;
                 
               );
             );
             '
        )
    ),
    MultiselectHTML(c("a", "b", "c", "d", "e"), "multiselect1"),
    uiOutput("mselect")
)

server <- function(input, output, session) 
    output$mselect <- renderUI(
        HTML(paste(
            "multiselect1:",
            paste(input$multiselect1, collapse = ", "),
            "<br>multiselect1_to:",
            paste(input$multiselect1_to, collapse = ", "),
            "<br>q:",
            paste(input$q, collapse = ", ")
        ))
    )


shinyApp(ui = ui, server = server)

【参考方案1】：

对于默认选择左侧选项，只需在创建 <option> 时添加 selected 属性即可，即

for (i in 1:length(mylist)) 
    paste_sum <- paste0(paste_sum, "<option selected value=", i, ">", mylist[i], "</option>")

对于移动后的默认选择正确选项，您可以使用 jquery 编辑将selected 属性附加到移动的选项：

$("select option").each(function()
        $(this).attr("selected","selected");
);

您的回调需要有一个新的移动到正确的功能。类似于（取自文档here）：

tags$script(
    HTML(
        'jQuery(document).ready(function($) 
               $("#multiselect1").multiselect(
                 search: 
                 left: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 right: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 ,
                 fireSearch: function(value) 
                   return value.length >= 1;
                 ,
                 moveToRight: function(Multiselect, $options, event, silent, skipStack) 
                    var button = $(event.currentTarget).attr("id");
                    if (button == "multiselect1_rightSelected") 
                        var $left_options = Multiselect.$left.find("> option:selected");
                        Multiselect.$right.eq(0).append($left_options);
                        $("select option").each(function()$(this).attr("selected","selected");)
                    if ( typeof Multiselect.callbacks.sort == "function" && !silent ) 
                        Multiselect.$right.eq(0).find("> option").sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                        $("select option").each(function()$(this).attr("selected","selected");)
                    
                     else if (button == "multiselect1_rightAll") 
                        var $left_options = Multiselect.$left.children(":visible");
                        Multiselect.$right.eq(0).append($left_options);
 
                        if ( typeof Multiselect.callbacks.sort == "function" && !silent ) 
                            Multiselect.$right.eq(0).find("> option").sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                            $("select option").each(function()$(this).attr("selected","selected");)
                            
                    
                    
                )
             );
             '
    )
)

【讨论】：

感谢您的善意建议。我不熟悉java脚本，但我想我需要学习它才能掌握闪亮。这两个盒子的UI在Shiny中很有用，所以我会研究你给我的代码。

尝试在您闪亮的应用程序的 tagscript 部分替换上面的代码以测试行为。如果它有效，请接受它已解决。另外，如果您不想跳入 JS 兔子洞，不妨检查一下 this。