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);
});
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.
Solution is putting jquery code into document.ready()
. Thanks to Kartikeya
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.
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
$(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>
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)
});
$(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>