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    lt select class  selectpicker  data-live-search  true  data-size  7  gt     lt option gt Petr Karel lt  option gt     lt option gt Honza Nov  k lt  option gt     lt option gt David Egydy lt  option gt     lt option gt Sl  va Kov  r lt  option gt     lt option gt Hana Skalick   lt  option gt     lt option gt Simona Kol  rov   lt  option gt     lt option gt Katerina Sychov   lt  option gt     lt option gt Am  lka Sychov   lt  option gt     lt option gt Jana Sychov   lt  option gt     lt option gt Magdal  na Sychov   lt  option gt     lt option gt Tereza Sychov   lt  option gt     lt option gt Bohdana Sychov   lt  option gt   lt  select gt    Here s my JavaScript     inicialization of select picker     selectpicker   selectpicker       on change function i need to control selected value    select selectpicker   on  change   function       var selected       selectpicker option selected   val       alert selected         Issue  My problem is that change function won t work  It doesn t do anything  and I can t find solution by myself   If i put it into document ready instead change function it seems to be working  So i guess i have mistake somewhere in       select selectpicker   on  change   function      I also tried to use only        selectpicker   on  change   function      without this select prefix but nothing changes   UPDATE  Solution is putting jquery code into document ready    Thanks to Kartikeya

User · Answer

Easiest implementation    lt script gt           selectpicker    change function             alert   Handler for  change   called               lt  script gt

User · Answer

Id   change function        var selected       Id option selected   val        alert selected                    I think this is what you need

User · Answer

This is what I did       selectpicker   on  changed bs select   function  e  clickedIndex  newValue  oldValue        var selected     e currentTarget  val

User · Answer

When Bootstrap Select initializes  it ll build a set of custom divs that run alongside the original  lt select gt  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    x000D   x000D    function     x000D   x000D       select   on  change   function e   x000D      console log this value  x000D                  this options this selectedIndex  value  x000D                    this  find  option selected   val      x000D        x000D     x000D      x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   lt link href    cdnjs cloudflare com ajax libs bootstrap-select 1 12 4 css bootstrap-select css  rel  stylesheet   gt  x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs bootstrap-select 1 12 4 js bootstrap-select js  gt  lt  script gt  x000D   x000D   lt select class  selectpicker  gt  x000D     lt option val  Must  gt  Mustard  lt  option gt  x000D     lt option val  Cat   gt  Ketchup  lt  option gt  x000D     lt option val  Rel   gt  Relish   lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Solution 2 - Bootstrap Select Custom Events  As this answer alludes  Bootstrap Select has their own set of custom events  including changed bs select which      fires after the select s value has been changed  It passes through event  clickedIndex  newValue  oldValue    And you can use that like this      select   on  changed bs select          function e  clickedIndex  newValue  oldValue        console log this value  clickedIndex  newValue  oldValue        Demo in Stack Snippets    x000D   x000D    function     x000D   x000D       select   on  changed bs select    x000D          function e  clickedIndex  newValue  oldValue    x000D        console log this value  clickedIndex  newValue  oldValue  x000D        x000D   x000D      x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   lt link href    cdnjs cloudflare com ajax libs bootstrap-select 1 12 4 css bootstrap-select css  rel  stylesheet   gt  x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs bootstrap-select 1 12 4 js bootstrap-select js  gt  lt  script gt  x000D   x000D   lt select class  selectpicker  gt  x000D     lt option val  Must  gt  Mustard  lt  option gt  x000D     lt option val  Cat   gt  Ketchup  lt  option gt  x000D     lt option val  Rel   gt  Relish   lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Simplest solution would be -       selectpicker   trigger  change

User · Answer

My implementation  import   from  jquery      document  ready      gt          whatDescribesYouSelectInput   on  change    e    gt        if  e target value      Other               whatDescribesYouOtherInput   attr  type    text              specifyLabel   show          else             whatDescribesYouOtherInput   attr  type    hidden              specifyLabel   hide

[javascript] Bootstrap-select - how to fire event on change

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to bootstrap-select