CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
robintw
robintw

Reputation: 28521

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

enter image description here

<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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?

Upvotes: 0

Views: 3348

Answers (1)

Jakob
Jakob

Reputation: 3546

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

Here is example

Upvotes: 3

Related Questions