Bootstrap-select demo
Fiddle to demonstrate 'change' event not firing for <select> tag.
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.js"></script>
<select id="mySelect" class="selectpicker">
<option>Select...</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div id="initResult">bootstrap-select is not here :/</div>
CSS
.selectpicker { display:block!important; }
#initResult {
padding: 10px;
}
JavaScript
require.config({
paths: {
'jquery': "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min",
'bootstrap': "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min",
'bootstrap-select': 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/js/bootstrap-select'
},
shim: {
'bootstrap-select': {
deps: ['jquery', 'bootstrap'],
init: function ($) {
'use strict';
$('select').selectpicker();
$('#initResult').text('yay - bootstrap select works');
}
}
}
});
requirejs(['jquery', 'bootstrap-select'],
function ($) {
});