$(...).selectpicker is not a function

Question

I am using bootstrap-select for a form. I include the scripts (jquery, bootstrap-select) in the header of the HTML file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

All the select elements with class "selectpicker" all called correctly. Example of the select element:

<select id="test" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
</select>

However, if I call the following script on the same page

<script>
$(document).ready(
    function () {
        $('#test').selectpicker('val', 'Relish')
});
</script>

I get this nasty error

$(...).selectpicker is not a function

Looking at the sources tab in Google Chrome, I see that the bootstrap-select.min.js is loaded well. Has anyone got suggestions?

From their documentation you also need to include bootstrap itself: `Requires jQuery v1.8.0+, Bootstrap’s dropdown.js component, and Bootstrap's CSS` https://silviomoreto.github.io/bootstrap-select/ — Rory McCrossan, Apr 12 '17 at 09:06
You need to include https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js as well — Vinod Louis, Apr 12 '17 at 09:11
Sadly, this was not the issue. Bootstrap was already included in the file (different HTML view). — Djov, Apr 12 '17 at 09:41

score 44 · Accepted Answer · edited Nov 21 '17 at 09:48

44

If you have another jquery.js reference that is loading after bootstrap-select.min.js it will wipe out $(...).selectpicker function and other functions. Make sure that bootstrap-select.min.js is loaded last.

edited Nov 21 '17 at 09:48

Mihai Alexandru-Ionut

47,092
13
101
128

answered Apr 12 '17 at 10:20

Calin Vlasin

1,331
1
15
21

1

This was it. Jquery was stupidly loaded twice in my solution. Thanks a lot, what a rookie mistake. – Djov Apr 12 '17 at 11:52
I tried this but not working..still says Uncaught TypeError: $(...).selectpicker is not a function @Djov – Khushbu Vaghela May 19 '21 at 13:13
1

I found the solution .selectpicker() is working in document.ready() – Khushbu Vaghela May 20 '21 at 04:44

score 3 · Answer 2 · edited Aug 14 '22 at 08:37

Try to load bootstrap before bootstrap-select ;-)

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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-select/1.12.2/js/bootstrap-select.min.js"></script>

score 2 · Answer 3 · answered Jan 09 '21 at 12:46

2

For whatever reason this needs to be called through jquery

$("#MyDropDown").selectpicker('render');

This (non jquery) generates the error:

mdd = document.getElementById("MyDropDown");
mdd.selectpicker('render');

I'm interested to know why.

answered Jan 09 '21 at 12:46

Nick.Mc

18,304
6
61
91

1

Hi, because SelectPicker is a jquery libray, it means that it will work & react only with Jquery 'objects' and not 'real' element selected from the dom, if you search better you can find that the elemnt returned by jquery ( using `$('#elemnt-id')` ) is far different from `document.getElementById("elemnt-id");`. – Hicham O-Sfh Jun 09 '21 at 01:08
1

Thanks @HichamO-Sfh that makes sense. – Nick.Mc Jun 09 '21 at 02:35

$(...).selectpicker is not a function

3 Answers3

Linked