Selectpicker（引导选择）不起作用，显示禁用的菜单？

Question

I'm trying to use selectpicker from Bootstrap-Select to make a multi-select dropdown menu. Here is what I have in my HTML file:

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

But this is what I get on my web app:

I can't hit the dropdown menu, it's disabled. How do I get this menu to be enabled?

Answer 1

1) Did you include the javascript file? If using CDN or download it, please make sure to include jquery, bootstrap, and the bootstrap-select. Once set up correctly, with the selectpicker class to your select elements, it will auto-initialize bootstrap-select.

2) If to style only custom class, use:

$('.my-custom').selectpicker();

Answer 2

Sorry if you question is already answered, but a snippet might help ?

 $(function () { $('.selectpicker').selectpicker(); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"> <select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script> 

Answer 3

I finally figured it out. When you're grabbing Bootstrap.js, jQuery, and Popper for your HTML file, they have to be in this order:

<script src="jquery-3.3.1.slim.min.js"> <script src="popper.min.js"> <script src="bootstrap.min.js">

Or else certain things won't work. Once I changed this, selectpicker worked fine.