javascript - 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 and copy it to my local to save some load time. But when I tried to run this, I got this result:

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.

<!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./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:

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.

Share Improve this question asked Jul 3, 2018 at 1:04 Michael Harley 1,0481 gold badge12 silver badges21 bronze badges

1 Did you forget to add bootstrap.css? – StaticBeagle Commented Jul 3, 2018 at 1:07
Do I need to add bootstrap to use bootstrap-select? Sorry, I'm new here at bootstrap-select. – Michael Harley Commented Jul 3, 2018 at 1:10
1 @StaticBeagle Oh yeah, I need to use bootstrap to use bootstrap-select. Thanks a lot. :) (Just now I tried it) – Michael Harley Commented Jul 3, 2018 at 1:15
1 You bet. Glad I could help! – StaticBeagle Commented Jul 3, 2018 at 1:20

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

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 repile it.

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

Hope it helps !

try this hope it helps :)

$(document).ready(function(e) {
  $('.selectpicker').selectpicker();
});

<link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.3.1/css/bootstrap-bined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">


<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>



<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn./twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>

Looks like you need to include Bootstrap’s dropdown.js ponent, and Bootstrap's CSS. Only then you can use bootstrap-select. Info is here at the very top http://silviomoreto.github.io/bootstrap-select/.

Take a look at this fiddle https://jsfiddle/sairam0903/x9bm7qs8/2/

in my case bootstrap is not working, becuase I am using bootstrap 5 and using bootstrap 4 cdns, then I switched it to the bootstrap 5 and worked like a charm. if you want to get 3,4 and 5 bootstrap cdns, you can get these cdns from this video description

https://www.youtube./watch?v=AyztNgccjJ8

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Simple bootstrap-select not working - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)