Options can be passed via JavaScript or data attributes: $(‘.selectpicker’).selectpicker({ dropupAuto: false }); or <select class=”selectpicker” data-dropup-auto=”false”> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> You can also set this globally: $.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;
Because the bootstrap-select is a Bootstrap component and therefore you need to include it in your code as you did for your V3 NOTE: this component only works in bootstrap-4 since version 1.13.0 $(‘select’).selectpicker(); <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css”> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css” /> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js”></script> <select class=”selectpicker” multiple data-live-search=”true”> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
The value is correctly selected, but you didn’t see it because the plugin hide the real select and show a button with an unordered list, so, if you want that the user see the selected value on the select you can do something like this: //Get the text using the value of select var text … Read more