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
Top comments (3)
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
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!
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