bootstrap-multiselect creates button that does nothing, rather than dropdown multiselect list-CodePudding

I'm trying to use

<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?

CodePudding user response：

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"  data-bs-toggle="dropdown"><span ></span></button>',
    }
});

And you also need to use bundle version of bootstrap which contains popper.js

Here is example