Issue with multiple bootstrap-multiselect on page

Question

On Page I have 3 multiple-select-boxes. Only for 3rd one I have additional logic (custom onchange event). So first 2 I just initialize with line of code :

$('.multiselect').multiselect();

But when I've tried to add custom logic for 3rd select - it doesn't work.

$('#RegionIds').multiselect({
    onChange: function(option, checked) {
        alert('changed value' + $(option).val());
    }
});

Alert never appears in this case.

---

Update : JsBIN Example : https://jsbin.com/voquhegode/edit?html,js,output

---

Update 2 :

Thanks for replies. But I've found another issue with multiple selects.

https://jsfiddle.net/x6z6w0n8/7/ In case I want to set selected values on initialize step, I saw one additional select. This causes line of code where I manualy set selected values

$(select).multiselect('select', jsonArr[i].Item1);

Answer 1

You should use $('.multiselect').multiselect(); in the end like here fiddle Because you cover other elements with custom logic which has the same class .multiselect

$('#example-onInitialized').multiselect({  
  onChange: function(option, checked, select) {
    var changedVal = $(option).val();
    if (changedVal < 3) {
      if (checked == true) {
        console.log('less');
      } else if (checked == false) {
        console.log('more');
      }
    }
  }
});
$('#RegionIds').multiselect({
    onChange: function(option, checked) {
        console.log('changed');
    }
});
$('.multiple').multiselect();

Or if every select has custom logic call multiselect() for concret IDs.