Javascript 如何在multiInput（）shinywidgets上添加“全选”和“全部删除”按钮

我正在创建一个仪表板，其中有国籍列表。 我想使用shinyWidgets中的multiInput（）在双重列表框中显示这些国籍，并使用全选和全选按钮。 以下是一个例子： 闪亮的代码

multiInput(label =  "Nationality",inputId = "tp_nat",
choices= tpn_mater$name,"100%",options= list(
enable_search = TRUE,
search_placeholder ="Search...",
non_selected_header = "Available",
selected_header = "Selected "
                                                                                                             ) ),

#Button Code 
div(id="multisecallsec",fluidRow(column(width = 6,align="center",actionBttn(inputId = "tpnatSAll",size = "sm",style = "material-circle",label = NULL,icon = icon("angle-double-right",lib = "font-awesome"))),
                                                                                                                  column(width = 6,align="center",actionBttn(inputId="tpnatRAll",label = NULL,size="sm",style = "material-circle",icon = icon("angle-double-left",lib = "font-awesome")))

JavaScript函数

try{
  function tpselectAll(sltid){
    const multiwrapper = document.querySelector(sltid),
      nonSelectedDiv = multiwrapper.querySelector('.non-selected-wrapper'),
      selectedDiv = multiwrapper.querySelector('.selected-wrapper'),
      nonSelectedHeader = nonSelectedDiv.querySelector('.header'),
      selectedHeader = selectedDiv.querySelector('.header');


// Grabbing all itemd from non-selected div
const items = nonSelectedDiv.querySelectorAll('.item');
    // Defining empty array
    const cloneItem = [];
      items.forEach(item => {
      // for all items adding class of selected
      item.classList.add('selected');
      
      // cloning each item and pushing it to the cloneItem array
      cloneItem.push(item.cloneNode(true));
    });
    
    // Loop through all clone items and appending to selectedDiv
    cloneItem.forEach(cln => selectedDiv.appendChild(cln));

}

function tpremoveAll(sltid){
    const multiwrapper = document.querySelector(sltid),
      nonSelectedDiv = multiwrapper.querySelector('.non-selected-wrapper'),
      selectedDiv = multiwrapper.querySelector('.selected-wrapper'),
      nonSelectedHeader = nonSelectedDiv.querySelector('.header'),
      selectedHeader = selectedDiv.querySelector('.header');

const selectedItems = selectedDiv.querySelectorAll('.item');

    // Loop through selectItems and revoing them from selectedDiv
    selectedItems.forEach(item => item.remove());
    // Loop through items and revoing class of selected
    items.forEach(item => item.classList.remove('selected'));

}
  }

catch(err){
  
}

#按钮点击事件

observeEvent(input$tpnatSAll,ignoreNULL = TRUE,ignoreInit = TRUE,{
    shinyjs::runjs("tpselectAll('#tp_nat + .multi-wrapper');")
    # shinyjs::disable("tpnatSAll")
    })

我从中得到了部分解决方案，但无法解决以下问题

如果我从所选选项中选择要删除的任何一个所选选项，则它将删除除单击选项之外的所有选项。（与我所期望的完全相反）并且它发生在两个框（选中和未选中）上

如果我多次单击“全选”按钮，它会多次复制所选内容

---

或者任何知道如何使用Shiny中的select或Remove All按钮实现duallist box的人？

是的，当然，这个论坛是针对每个开发人员的。当然，这个论坛是针对每个开发人员的