bootstrap-multiselect 创建什么都不做的按钮，而不是下拉多选列表

Question

I'm trying to use bootstrap-multiselect to get a multi-select dropdown on my web page.我正在尝试使用bootstrap- multiselect 在我的 web 页面上获取多选下拉菜单。

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?我究竟做错了什么？

Answer 1

Problem is in versions you use.问题出在您使用的版本中。 Bootstrap is supported up to version 4 since they have migration guide just up to v4 Bootstrap 支持最高版本 4，因为它们具有最高 v4 的迁移指南

And also, as I can see, rawgit version that you use is not the same as the latest version.而且，正如我所见，您使用的 rawgit 版本与最新版本不同。

Here is the version that uses js and css from their page and it works fine.这是从他们的页面使用 js 和 css 的版本，它工作正常。

If you need it to work with v5 then you can use it like this如果您需要它与 v5 一起使用，那么您可以像这样使用它

$('#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而且您还需要使用包含 popper.js 的引导程序的捆绑版本

Here is example这是示例

bootstrap-multiselect 创建什么都不做的按钮，而不是下拉多选列表

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-02 15:30:00

bootstrap-multiselect 创建什么都不做的按钮，而不是下拉多选列表

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-02 15:30:00

解决方案1
1 已采纳 2022-02-02 15:30:00