bootstrap-select Dropdown shows no entries

Question

I use bootstrap-select in my form to display some suppliers, but it looks like this:

My select looks like this:

<select class="selectpicker" data-live-search="true" title="Choose Supplier"> 
    <option data-tokens="Supplier 1">Supplier 1</option>
    <option data-tokens="Supplier 2">Supplier 2</option>
    <option data-tokens="Supplier 3">Supplier 3</option>
    <option data-tokens="add Supplier">Add Supplier</option>
</select>

The .css file is linked in the head tag and the .js is linked at the end of the site. What is the problem with this code? In the examples it looks the same but on my site it do not work. What am I missing or doing wrong?

score 0 · Answer 1 · answered Oct 13 '17 at 07:32

0

in example using bootstrap-select.min.css that's why not show you like example.

answered Oct 13 '17 at 07:32

Zeshan

180
1
7
18

I link to the css in the head tag: `` and the JS file is linked at the end of the page. – Fabian Oct 13 '17 at 08:22
it looks like on the picture in the question. there are already all necessary files linked. – Fabian Oct 13 '17 at 08:25
can i see your website link? – Zeshan Oct 13 '17 at 08:28
https://stackoverflow.com/questions/40757224/data-live-search-style-data-attribute-is-not-working-in-bootstrap-select-js – Zeshan Oct 13 '17 at 08:32
i think your js files priority create problem. you can check js files change location. – Zeshan Oct 13 '17 at 08:58

score 0 · Answer 2 · answered Oct 13 '17 at 08:51

    <html>
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
  </head>

  <div class="container">
    <div class="row">
      <h2>Bootstrap-select example</h2>
      <p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a></p>
      <hr />
    </div>

    <div class="row-fluid">
      <select class="selectpicker" data-show-subtext="true" data-live-search="true">
        <option data-subtext="Rep California">Tom Foolery</option>
        <option data-subtext="Sen California">Bill Gordon</option>
        <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
        <option data-subtext="Rep Alabama">Mario Flores</option>
        <option data-subtext="Rep Alaska">Don Young</option>
        <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
      </select>
      <span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>

bootstrap-select Dropdown shows no entries

2 Answers2