canJsのブートストラップのselectpickerプラグインでどのオプションが選択されているかを調べる方法は？

Question

selectpickerプラグインbootstrapを使用しています。今、私はどのオプションが選択されているか、最後に選択解除されているかを見たい。任意のoptionがselectedまたはdeselectedあるとき

<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内の任意のをトリガしませんでした。しかし、私はピッカー全体のイベントを引き起こす可能性があります。

".selection-criteria change": function(el,ev){ 
    val colNames = $(el).val() // it returns all the selection options value 
} 

しかし、私はselectpickerのオプションクリックで任意のイベントをトリガーできますか？任意のオプションが変更されたら、私はそのオプションを取得し、それが今選択されているか選択解除されていることを知りますか？私はcanJsでそれをすることができますか？

EDIT：私が選択するか、オプション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

あなたのViewModelのプロパティにご<select>の値をバインドする必要があります。次に、そのプロパティのセッターを定義することによって、古い値と新しい値の両方にアクセスすることができます。私は、どの項目が新しく選択され、どの項目が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; 
     } 
     } 
    } 
    }) 
});