Search code examples
javascriptjqueryhtmlcssbootstrap-select

Simple bootstrap-select not working

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap-select.min.css">
</head>
<body>
    <select class="selectpicker">
        <option>Choose</option>
        <option>1</option>
        <option>1</option>
    </select>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.selectpicker').selectpicker();
        });
    </script>
</body>
</html>

I have this code. I'm using jquery 3.3.1 I used bootstrap-select from https://github.com/silviomoreto/bootstrap-select and copy it to my local to save some load time. But when I tried to run this, I got this result:

Bootstrap-select .selectpicker not working

Did I do thing wrong? I've tried searching for answer, but can't seem to found any working answer. Thanks.

NB: I tried using Chrome and Firefox, both gave me the same result.

Solution

  • The dependencies section of this link has your answer.

    For this to work, you needs :

    • jQuery v1.8.0+
    • Bootstrap’s dropdown.js
    • Bootstrap's CSS

    If you don't have bootstrap in your project, you can add the minified version and customize it for your needs and recompile it.

    PS Don't use the bootstrap version 4 because it will probably not work.

    Hope it helps !