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

Question

我正在尝试使用 bootstrap-multiselect 在我的网页上获得多 select 下拉菜单。

我创建了一个最小示例，其代码如下。当我运行时，我在页面上看到一个看起来像 'old-style' 的按钮，单击它时什么也不做。我期待 bootstrap-multiselect 下拉列表 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>

我做错了什么？

Answer 1

问题出在您使用的版本中。 Bootstrap 最高支持版本 4，因为他们有 migration guide 直到 v4

而且，据我所知，您使用的 rawgit 版本与最新版本不同。

Here 是从他们的页面使用 js 和 css 的版本，它工作正常。

如果您需要它与 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>',
    }
});

并且您还需要使用 bootstrap 的捆绑版本，其中包含 popper.js

Here is example

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

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

html

javascript

twitter-bootstrap