javascript - Bootstrap selectpicker does not show options - Stack Overflow

admin管理员组

文章数量:1356413

I have the below simple code that is not working properly. In fact I'm trying to use bootstrap-select - Silvio Moreto in my project. It's not showing the options when I click on it. I narrowed the code to the basic example given by the author but still the same issue.

My code:

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

<script src=".1.1/jquery.min.js"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".12.4/css/bootstrap-select.min.css">
<!-- Latest piled and minified JavaScript -->
<script src=".12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src=".12.4/js/i18n/defaults-fr_FR.min.js"></script>

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

I have the below simple code that is not working properly. In fact I'm trying to use bootstrap-select - Silvio Moreto in my project. It's not showing the options when I click on it. I narrowed the code to the basic example given by the author but still the same issue.

My code:

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<!-- Latest piled and minified JavaScript -->
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-fr_FR.min.js"></script>

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

Here is what I'm getting:

• javascript
• bootstrap-select

Share Improve this question Follow edited Jun 22, 2018 at 2:23 Muhammad Omer Aslam 23.8k99 gold badges4646 silver badges6969 bronze badges asked Jun 22, 2018 at 1:47 PatricePatrice 18311 gold badge22 silver badges1515 bronze badges 1

• you basic example does not work – Muhammad Omer Aslam Commented Jun 22, 2018 at 2:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Because you are not including the bootstrap default CSS and JS files add them and it will work see below demo with the minimum set of files that you need to run. I used bootstrap 3 as you didn't mention what version you are using if you are using the bootstrap 4 you can add the popper.min.js umd version.

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest piled and minified JavaScript -->
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-en_US.js"></script>


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

本文标签： javascriptBootstrap selectpicker does not show optionsStack Overflow