CODEWITHSUNDEEP
twitter-bootstrapbootstrap-select
Suraj
Suraj

Reputation: 586

Bootstrap select error: Cannot set property '_menu' of undefined

I've implemented select box using bootstrap-select in angular 5. I've used latest version of Bootstrap select to make it work angular 5. But it throws below error.

bootstrap-select.js:1904 Uncaught TypeError: Cannot set property '_menu' of undefined

<form>
     <select class="selectpicker" data-live-search="true">
         <option>Mustard</option>
         <option>Ketchup</option>
         <option>Relish</option>
     </select>
</form>

View Plunkr

Upvotes: 6

Views: 11536

Answers (4)

Sky Yip
Sky Yip

Reputation: 1089

It works in bootstrap-select v1.13.11 with bootsrrap v4.3.1 and jQuery v3.4.1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

I found out the problem was with bootstrap.bundle.min.js, please use the latest version instead.

Upvotes: 0

Suraj
Suraj

Reputation: 586

Bootstrap-select v1.13.0-dev is compatible with Boostrap 4. You can find Compatible bootstrap-select files here Boostrap-select

Isue is that i am not loading required jquery and popper.min.js files into project directory. Also use non minified version of bootstrap select from repository code. I've solved this issue by adding above files.

Upvotes: 2

isherwood
isherwood

Reputation: 61079

I suspect that the plugin you're using isn't compatible with Bootstrap 4. The documentation and examples all use Bootstrap 3.

https://silviomoreto.github.io/bootstrap-select/

Upvotes: 0

S.V.
S.V.

Reputation: 1221

https://getbootstrap.com/docs/4.0/components/input-group/#custom-select

Your issue is that you aren't using the select dropdown properly according to Bootstrap 4. You can't upgrade from Bootstrap 3 to Bootstrap 4 without updating your code to use the new methodologies, unfortunately.

<select class="custom-select" data-live-search="true">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

Upvotes: 0

Related Questions