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

Question

I want to use the bootstrap multi select plugin : 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>

Answer 1

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

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

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.

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.

Answer 3

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

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

Get the reference from here.