DEV Community

scascalesp
scascalesp

Posted on

bootstrap-select not work in angular

Hello

Copy/paste and execute this in index.html of angular project:



`<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgAuth</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> -->

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
  <!-- (Optional) Latest compiled and minified JavaScript translation files -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script> -->

  <!-- <app-root>Loading...</app-root> -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
    crossorigin="anonymous"></script>

  <!-- <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script> -->

  <script src="./assets/js/custom.js"></script>

  <select class="selectpicker" data-live-search="true">
    <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
    <option data-tokens="mustard">Burger, Shake and a Smile</option>
    <option data-tokens="frosting">Sugar, Spice and all things nice</option>
  </select>

</body>
<script>
  alert('test');

</script>
</html>`


SAmple on: https://developer.snapappointments.com/bootstrap-select/examples/

Not working, select doesn't dropdown... why?
Thx
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
scascalesp profile image
scascalesp Author

Uggly solution from github.com/snapappointments/bootst...

"Above solution didnt work for me. What i did was removing all the styles and scripts from angular.json and placing them on index.html. In that way, it started working fine. I am on Angular 9."

Alternative is appreciated

Collapse
st3phhays profile image
Steph Hays • Edited on

I have not tested this nor do I know Angular, but it looks like you may need to upgrade the version of bootstrap-select you are using to at least v1.13.0. See npmjs.com/package/bootstrap-select...

I would also suggest updating your version of jQuery as well if there is no specific reason why you are on v1.11.1.

Hope that helps!

Collapse
scascalesp profile image
scascalesp Author • Edited on

same problem. See updated sample in post
If i try to doing by JQuery with $('.my-select').selectpicker(); show error TypeError: $(...).selectpicker is not a function