I'm struggling with the imports to make a dropdown multiple selector works. I have this selector (dynamically loaded from JS):
<div class="col-sm-4">
<label class="control-label input-label" for="statusFilter"
th:text="#{playerlist.filter.status}"></label>
<select id="statusFilter" class="selectpicker" multiple="multiple"
data-show-subtext="true" data-live-search="false" onchange="findReportsWithFilters()"
th:title="#{playerlist.filter.status}">
</select>
</div>
And these imports at the end of my html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
And I don't know why I'm still getting this error even though Popper.js is imported and before bootstrap and after jQuery as needed.
Any ideas?