0
397
Viewsbootstrap-multiselect creates button that does nothing, rather than dropdown multiselect list
I'm trying to use bootstrap-multiselect to get a multi-select dropdown on my web page.
I've created a minimal example, the code of which is below. When I run this I get a single 'old-style' looking button on the page, which does nothing when it is clicked. I was expecting one of the bootstrap-multiselect dropdown multiselects.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
crossorigin="anonymous">
</script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"
type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript">
</script>
</head>
<body>
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$('#example-getting-started').multiselect();
});
</script>
</body>
</html>
What am I doing wrong?
1 answers
Answer question0
Problem is in versions you use. Bootstrap is supported up to version 4 since they have migration guide just up to v4
And also, as I can see, rawgit version that you use is not the same as the latest version.
Here is the version that uses js and css from their page and it works fine.
If you need it to work with v5 then you can use it like this
$('#example-getting-started').multiselect({
buttonClass: 'form-select',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
}
});
And you also need to use bundle version of bootstrap which contains popper.js