1

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

Improve this question
1
  • Version incompatibility? Note that the versions of jquery/bootstrap/multiselect used in this answer seem to work ok.
    – James
    Commented Feb 5 at 17:30

1 Answer 1

Reset to default
2

Looks like an issue with bootstrap version, downgrade to lower version

I have updated with a lower version V3.4.1 seems working

<!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.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>

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.