bootstrap multiselect:TypeError:$(...)。multiselect不是函数

时间:2014-11-24 11:36:22

标签: jquery twitter-bootstrap

我想使用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>

7 个答案:

答案 0 :(得分:13)

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

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

答案 1 :(得分:11)

你需要在插件之前有一个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.

答案 2 :(得分:5)

在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>

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

  1. 是否有任何重复的jquery/js条目
  2. js files是正确的顺序吗?
  3. 您是否写过<script href=而不是<script src=:D

答案 5 :(得分:0)

像这样尝试:

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>

答案 6 :(得分:0)

相同的问题,当我更改布局并在末尾添加一个版本时,它可以正常工作: 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,可以直接从示例中正常工作