How to find which option is selected in selectpicker plugin of bootstrap in canJs?

Question

I am using the selectpicker plugin of bootstrap. Now i want to find which option is selected or deselected last.

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

Now i couldn't trigger any even in canJs when any option is selected or deselected. But i could trigger event on the whole picker.

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

But can i trigger any event on the option click of the selectpicker? When any option is changed then i will get that option and know that it is selected or deselected now?? Can i do that in canJs??

EDIT: If i select or deselect option 0 then i want to get that element i.e

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

On the basis of whether it is selected now or deselected now, i will hide some divs.

Do you want to have all the selected options or do you want to exactly know what is the last selected or deselected thing? What do you want to achieve at the end? — Marcel Wasilewski, Sep 21 '16 at 09:06
I want to know exactly the last selected or deselected option — Setu Kumar Basak, Sep 21 '16 at 09:09

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

This will give you all selected options on change using jQuery.

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

    alert(selectedText);
});

If you want the last selected value you can push them to an array and get the lastest ID. (Reference: how to get the clicked option in bootstrap selectpicker?)

https://jsfiddle.net/96stvL6f/

edited May 23 '17 at 12:01

Community

1
1

answered Sep 21 '16 at 09:19

Marcel Wasilewski

2,519
1
17
34

I think you didn't understand my question. But if there an option which is selected before and now i have deselected it. So i want that deselected option element. It is selected or deselected doesn't matter. It matters which option is changed exactly now. – Setu Kumar Basak Sep 21 '16 at 09:21

score 2 · Answer 2 · answered Sep 21 '16 at 17:20

You should bind the value of your <select> to a property on your viewModel. Then, by defining a setter for that property, you can have access to both the old and new values. I wrote the code to determine what items are newly selected and which items were deselected using 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>

...then in your 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;
        }
      }
    }
  })
});

How to find which option is selected in selectpicker plugin of bootstrap in canJs?

2 Answers2