Question

我正在使用selectpicker的{{1}}插件。现在我想找到最后选择或取消选择的选项。

bootstrap

现在，当任何<select class="selectpicker selection-criteria" multiple> <option value="0" selected>Mustard</option> <option value="1" selected>Ketchup</option> <option value="2" selected>Relish</option> </select>为canJs或option时，我甚至无法在selected内触发任何内容。但是我可以在整个选择器上触发事件。

deselected

但是我可以在".selection-criteria change": function(el,ev){ val colNames = $(el).val() // it returns all the selection options value }的选项点击时触发任何事件吗？当任何选项被更改，那么我将得到该选项，并知道它现在被选中或取消选择??我可以在canJs吗？

编辑：如果我选择或取消选择选项0，那么我想获得该元素，即

selectpicker

根据现在是选中还是现在取消选择，我会隐藏一些div。

Answer 1

您应该将<select>的值绑定到viewModel上的属性。然后，通过为该属性定义setter，您可以访问旧值和新值。我编写了代码来确定哪些项目是新选择的，哪些项目是使用lodash取消选择的。

http://jsbin.com/pobukubari/1/edit?html,js,output

<select {($value)}="selectedOptions" class="selectpicker selection-criteria" multiple>
  <option value="0" selected>Mustard</option>
  <option value="1" selected>Ketchup</option>
  <option value="2" selected>Relish</option>
  <option value="3" selected>Onions</option>
  <option value="4" selected>Sauerkraut</option>
</select>

...然后在你的viewModel中：

can.Component.extend({
  tag: "my-component",
  template: can.view('my-component-template'),
  viewModel: can.Map.extend({
    define: {
      selectedOptions: {
        set: function (newItems) {
          var prevItems = this.attr('selectedOptions');
          var union = _.union(prevItems, newItems);
          var selected = _.difference(union, prevItems);
          var deselected = _.difference(union, newItems);
          console.log('You just selected these new items:', selected.join(', '));
          console.log('You just deselected:', deselected.join(', '));
          return newItems;
        }
      }
    }
  })
});

Answer 2

这将使用jQuery为您提供所有选定的更改选项。

error.no.7 <- read.csv(choose.files("file.csv"),header = TRUE)

library(shiny)
library(shinythemes)

ui <- shinyUI( fluidPage(theme=shinytheme("readable"),
                    titlePanel(h3("PUMA", style = "color:black")),
                    sidebarLayout(
                    sidebarPanel(
                    tags$head(
                    tags$style("body {background-color: pink; }")),
                    textInput("Possible.cause", label="Add a new Possible.cause ", value="Enter Possible.cause"),
                    textInput("Check", label="Add a new Check", value="Enter Check"),
                    textInput("Remedy", label="Add a new Remedy", value="Enter Remedy"),
                    actionButton("addButton", "UPLOAD!"),
                    downloadButton('downloadData', 'Save')

                       ),
 mainPanel(
           tableOutput("table"))
           )))

server = function(input, output) {    
 row.names(error.no.7) <- NULL

values <- reactiveValues()
values$df <- error.no.7
observeEvent(input$addButton, {

if(input$addButton > 0) {
  # create the new line to be added from your inputs
  newLine <- isolate(c(input$Possible.cause, input$Check, input$Remedy))
  isolate(values$df <- rbind(as.matrix(values$df), unlist(newLine)))
  }
 })


 output$table <- renderTable({values$df}, include.rownames=F)

 output$downloadData <- downloadHandler(
    filename = function() { paste(values$df, '.csv',sep="") },
    content = function(file) {
      write.csv(values$df, file, row.names=F)
    }
  )
  }

 shinyApp(ui = ui, server = server)

如果您想要最后选择的值，可以将它们推送到数组并获取最新的ID。（参考：how to get the clicked option in bootstrap selectpicker?）

https://jsfiddle.net/96stvL6f/

如何在canJs中找到bootstrap的selectpicker插件中选择的选项？

2 个答案: