Bootstrap Multiselect 仍然可行吗？

Answer 1

您可以在浏览器的开发者工具中查看您的bootstrap版本，并查看是否有相关错误信息。 您可以选择以下两种方法：

1. 如果您使用的bootstrap版本是V5，您可以迁移到v4。

2. 或者可以使用对应版本的bootstrap，但需要在Bootstrap Multiselect插件上进行相关的初始化配置。

可以作为bootstrap5.1.3的参考：

<link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />

<select id="campusMultiSelect"
        multiple="multiple">
    <option value="Campus1">Campus 1</option>
    <option value="Campus2">Campus 2</option>
    <option value="Campus3">Campus 3</option>
</select>

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="~/js/bootstrap-multiselect.js"></script>

@section scripts {

    <script src="~/lib/jquery/dist/jquery.js"></script>
  
    <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <script src="~/js/bootstrap-multiselect.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#campusMultiSelect').multiselect({
                buttonClass: 'form-select',
                templates: {
                    button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
                }
            });


        });
    </script>
}

可以看Multiselect的介绍：