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.

Answer 1

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>

Answer 2

The same problem, and I got it working when I changed the layout, adding a versions at the end: Changes. By default it was:

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

My version of jquery is 3.4.1:

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

Code inside view page is default:

    @* 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 without the Layout it work properly right out from example

Answer 3

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.

Answer 4

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.

Answer 5

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 6

If someone like me got into this check for

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