I am trying to enhance the functionality of my multiselect dropdown in Bootstrap by updating the values based on another multiselect selection. Currently, the code works well with one selection, but as soon as I include the class="selectpicker", it stops functioning and I lose my options.
Here is the code snippet I am currently using:
HTML:
<select id="deptos" class="selectpicker"></select>
<select id="munis" class="selectpicker"></select>
Javascript: The initial script was referred from here
<script>
window.onload = function() {
var depto = JSON.parse("{{deptos|escapejs}}"),//deptos comes from a django view.
depto_select = document.querySelector('#deptos'),
muni_select = document.querySelector('#munis');
setOptions(depto_select, Object.keys(depto));
setOptions(muni_select, depto[depto_select.value]);
depto_select.addEventListener('change', function() {
setOptions(muni_select, depto[depto_select.value]);
});
function setOptions(dropDown, options) {
dropDown.innerHTML = '';
options.forEach(function(value) {
dropDown.innerHTML += '<option value="' + value + '">' + value + '</option>';
});
}
};
$('select').selectpicker();
</script>
This is how it performs with basic selections:
https://i.sstatic.net/Ue55Y.png
https://i.sstatic.net/K5W4E.png
However, when I introduce the class="selectpicker", it displays like this: