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:

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Kovář</option>
  <option>Hana Skalická</option>
  <option>Simona Kolářová</option>
  <option>Kateřina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

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

why you are not putting jquery code in document.ready()..??? — Kartikeya Khosla, Sep 08 '14 at 09:26

KyleMit · Answer 1 · 2018-04-18T15:00:00.620

When Bootstrap Select initializes, it'll build a set of custom divs that run alongside the original <select> 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(),);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

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:

$(function() {

  $("select").on("changed.bs.select", 
        function(e, clickedIndex, newValue, oldValue) {
      console.log(this.value, clickedIndex, newValue, oldValue)
  });

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

**Another solution** This doesn't get's the value of last `un-selected` option, so instead try this [answer](https://stackoverflow.com/questions/36944647/bootstrap-select-on-click-get-clicked-value) — Shaiju T, Apr 18 '18 at 12:50
@stom, good point, I've inlined bits from that answer and identified the differences between both — KyleMit, Apr 18 '18 at 15:01
please edit to change `val=` to `value=` in the option tags. — mickmackusa, Sep 14 '20 at 01:07

score 32 · Answer 2 · answered Jun 13 '16 at 04:54

32

This is what I did.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});

answered Jun 13 '16 at 04:54

s k

2,280
3
28
39

**Another solution** This doesn't get's the value of last `un-selected` option, so instead try this [answer](https://stackoverflow.com/questions/36944647/bootstrap-select-on-click-get-clicked-value) – Shaiju T Apr 18 '18 at 12:50

score 8 · Answer 3 · edited Feb 24 '18 at 15:42

8

$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

I think this is what you need.

edited Feb 24 '18 at 15:42

Massimiliano Kraus

3,214
5
20
40

answered Feb 17 '16 at 17:21

Sangri

81
1
1

how to get all the values if multiselect? – Brian Wiley Dec 29 '20 at 06:00

score 8 · Answer 4 · answered Aug 05 '16 at 17:40

8

Simplest solution would be -

$('.selectpicker').trigger('change');

answered Aug 05 '16 at 17:40

Akshay Soni

87
1
2

score 3 · Answer 5 · answered Apr 04 '20 at 22:01

3

Easiest implementation.

<script>
    $( ".selectpicker" ).change(function() {
        alert( "Handler for .change() called." );
    });
</script>

answered Apr 04 '20 at 22:01

kanarifugl

9,526
5
22
39

score 0 · Answer 6 · answered Jan 15 '19 at 16:59

My implementation

import $ from 'jquery';

$(document).ready(() => {
  $('#whatDescribesYouSelectInput').on('change', (e) => {
    if (e.target.value === 'Other') {
      $('#whatDescribesYouOtherInput').attr('type', 'text');
      $('#specifyLabel').show();
    } else {
      $('#whatDescribesYouOtherInput').attr('type', 'hidden');
      $('#specifyLabel').hide();
    }
  });
});

Bootstrap-select - how to fire event on change

Issue

UPDATE

6 Answers6

Solution 1 - Native Events

Demo in Stack Snippets:

Solution 2 - Bootstrap Select Custom Events

Demo in Stack Snippets:

Linked