.selectpicker is not a function

BenV picture BenV · Aug 1, 2016 · Viewed 12.1k times · Source

I'm trying to use bootstrap-select and reference it from javascript, but I always get an error: .selectpicker is not a function

Everything I've read about this error says I have a dependency missing or not loaded at the right time, but I'm at a loss as to what I'm missing.

Also, I get the same error when I try $('.selectpicker').selectpicker(); from the console, which tells me that it's not an issue with my javascript running before everything's loaded.

Here's the relevant portions of my page:

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-select.css" rel="stylesheet"/>
...
<script src="/Scripts/jquery-2.2.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

<script src="/Scripts/bootstrap-select.js"></script>
...
<select class="selectpicker">
</select>
...
<script type="text/javascript">
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    });
</script>

Answer

BenV picture BenV · Aug 1, 2016

Found it. I had a second jquery reference that was re-loading jquery and wiping out the functions added by bootstrap-select.js.