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

bootstrap multiselect : TypeError: $(...).multiselect is not a function

提问by Aymen Bouhastine

I want to use the bootstrap multi select plugin : Bootstrap Multiselect

我想使用 bootstrap 多选插件：Bootstrap Multiselect

but it is not working for me.

但它对我不起作用。

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

回答by Indi

I faced the same issue today while writing a sample to test Bootstrap's multiselect, even after referencing the files in the right order in my .cshtml.

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

It turned out that I had referenced jquery library twice , and once I corrected that , it started working fine. Sometimes using Chrome dev tools you cannot see the library loaded twice, however, if you right click on the page and View source you can see if it is duplicated.

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

回答by Jai

you need to have a jquery library and bootstrap library before your plugin:

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

Note:

笔记：

You should always place your css before any script.

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

Get the reference from here.

从这里获取参考。

回答by Sarat Chandra

Include following JQuery and Bootstrap files in your index.html.

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

回答by Atiqur

If someone like me got into this check for

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

1. is there any duplicate jquery/jsentry
2. is the js filesare correct order?
3. did you write <script href=instead of <script src=:D

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

回答by Black

Try it like this:

像这样尝试：

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>

回答by TheFallenOne

To add to Indi's answer, I did face the same issue where in I had two jquery reference and hence had a list box instead of multiselect drop down. This was because my page inherited from the Layout page which had it's own jquery reference. So make sure you are having the reference in the Shared/_Layout.cshtml or in your page where you are implementing the drop down.

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