Bootstrap-select - how to fire event on change

Question

I\'m using Bootstrap 3.0.2 and the Bootstrap-select plugin.

Here\'s my select list:

Answer 1

When Bootstrap Select initializes, it'll build a set of custom divs that run alongside the original element and will typically synchronize state between the two input mechanisms.

Which is to say that one way to handle events on bootstrap select is to listen for events on the original select that it modifies, regardless of who updated it.

Solution 1 - Native Events

Just listen for a change event and get the selected value using javascript or jQuery like this:

$('select').on('change', function(e){
  console.log(this.value,
              this.options[this.selectedIndex].value,
              $(this).find("option:selected").val(),);
});

^{*NOTE: As with any script reliant on the DOM, make sure you wait for the DOM ready event before executing}

Demo in Stack Snippets:

$(function() {

  $('select').on('change', function(e){
    console.log(this.value,
                this.options[this.selectedIndex].value,
                $(this).find("option:selected").val(),);
  });
  
});

Mustard Ketchup Relish