Question

我想使用bootstrap multi select插件：Bootstrap Multiselect

但它不适合我。

<script type="text/javascript" src="dist2/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="dist2/css/bootstrap-multiselect.css" type="text/css"/>

<script type="text/javascript">

$(document).ready(function(){

    $('#doc_1').multiselect();

});

</script>

Answer 1

我在编写样本以测试Bootstrap的多选时遇到了同样的问题，即使在我的.cshtml中以正确的顺序引用文件之后也是如此。

原来我曾两次引用jquery库，一旦我纠正了它，它就开始正常工作了。有时使用Chrome开发工具，您无法看到两次加载的库，但是，如果您右键单击页面并查看源代码，则可以看到它是否重复。

Answer 2

你需要在插件之前有一个jquery库和bootstrap库：

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

注意：

您应该始终将css放在任何脚本之前。

Get the reference from here.

Answer 3

在index.html中包含以下JQuery和Bootstrap文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

Answer 4

为了增加Indi的答案，我确实遇到了同样的问题，我在其中有两个jquery引用，因此有一个列表框而不是多选下拉。这是因为我的页面继承自Layout页面，该页面具有自己的jquery引用。因此，请确保您在Shared / _Layout.cshtml或您正在实施下拉列表的页面中获得了引用。

Answer 5

如果像我这样的人进入此检查

是否有任何重复的jquery/js条目
js files是正确的顺序吗？
您是否写过<script href=而不是<script src=：D

Answer 6

像这样尝试：

jQuery('.mandator_select').multiselect({
    enableHTML: true
    ,optionLabel: function(element) {
        return '<img src="'+ $(element).attr('data-img')+'"> '+ $(element).text();
    }
    ,selectAllText: 'Alle auswählen'
    ,nonSelectedText: 'Keins ausgewählt'
    ,nSelectedText: 'selektiert'
    ,allSelectedText: 'Alle ausgewählt'
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<select class="mandator_select" multiple>
    <option data-img="https://i.stack.imgur.com/KNRU0.png">hecht</option>
    <option data-img="https://i.stack.imgur.com/0YDnb.png">IPS</option>
</select>

Answer 7

相同的问题，当我更改布局并在末尾添加一个版本时，它可以正常工作： Changes。默认情况下是：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

我的jquery版本是3.4.1：

@Scripts.Render("~/bundles/jquery-3.4.1.min")
@Scripts.Render("~/bundles/bootstrap.min")

默认情况下，视图页面中的代码为

    @* Include Twitter Bootstrap and jQuery: *@
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

    @* Include the plugin's CSS and JS: *@
    <script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap-multiselect.css" type="text/css" />

    @* Initialize the plugin: *@
    <script type="text/javascript">
        $(document).ready(function () {
            $('#id').multiselect(
                {
                    includeSelectAllOption: true
                });
        });
    </script>

没有布局的ps，可以直接从示例中正常工作

bootstrap multiselect：TypeError：$（...）。multiselect不是函数

7 个答案:

注意：

Get the reference from here.