如何在canJs中的bootstrap的selectpicker插件中查找选择哪个选项？

Question

我正在使用bootstrap的selectpicker插件。现在我想找到最后选择或取消选择哪个选项。

<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 
} 

但是，我可以触发selectpicker的选项点击任何事件？当任何选项被改变时，我会得到该选项，并知道它现在被选中或取消选择？我可以在canJs做到吗？

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

<option value="0" selected>Mustard</option> 

它是否现在选择或取消选择，现在，我会隐藏一些div的基础。

Answer 1

这会给你使用jQuery上改变所有选择的选项。

$('.selectpicker').change(function() { 
    var selectedText = $(this).find("option:selected").text(); 

    alert(selectedText); 
}); 

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

https://jsfiddle.net/96stvL6f/

Answer 2

您应该将<select>的值绑定到你的视图模型的属性。然后，通过为该属性定义一个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> 

...然后在您的视图模型：

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; 
     } 
     } 
    } 
    }) 
});