I am trying to get Bootstrap Multiselect running but it just doesn’t want to function. I already tried everything and just cannot find the issue.
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Bootstrap Multiselect Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-multiselect.css">
</head>
<body>
<select id="minimal-multiselect" 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 src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
$('#minimal-multiselect').multiselect();
});
</script>
</body>
</html>
This actually loads the multiselect correctly and the css is also working on it. But when i click on it the dropdown just doesn’t open. There is also no errors in the console.
I expected the dropdown to open
2
Answers
You simply don’t need the line of
See:
Looks like an issue with bootstrap version, downgrade to lower version
I have updated with a lower version V3.4.1 seems working