引导多选：TypeError: $(...).multiselect is not a function答案

【问题标题】：bootstrap multiselect : TypeError: $(...).multiselect is not a function引导多选：TypeError: $(...).multiselect is not a function
【发布时间】：2014-11-24 11:36:21
【问题描述】：

我想使用引导多选插件：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>

【问题讨论】：

你的页面中有这个插件的引用吗？
你添加给定的js文件了吗？
检查您的控制台是否有错误！以及你的 jquery 文件是否加载正确。

标签： jquery twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

同样的问题。谢谢！

【解决方案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.

【讨论】：

还没有工作。控制台中的相同错误：TypeError: $(...).multiselect is not a function : $('#doc_1').multiselect();
很高兴这对您有所帮助。
我的订单正确，但仍然无法正常工作。有什么想法吗？
将$('select[multiple]').multiSelect() 与大写“S”一起使用
写道“您应该始终将 css 放在任何脚本之前。”... 将 css/bootstrap-multiselect.css 放在 js/bootstrap-multiselect.js 之后 ...gg

【解决方案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>

【讨论】：

【解决方案4】：

为了补充 Indi 的答案，我确实遇到了同样的问题，因为我有两个 jquery 引用，因此有一个列表框而不是多选下拉菜单。这是因为我的页面继承自拥有自己的 jquery 引用的布局页面。因此，请确保您在 Shared/_Layout.cshtml 或您正在实施下拉菜单的页面中有参考。

【讨论】：

【解决方案5】：

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

是否有重复的jquery/js 条目
js files 的顺序是否正确？
你写的是<script href=而不是<script src= :D

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 如果没有布局，它可以从示例中正常工作

【讨论】：