title: bootstrap select not showing items
body: <p>I am trying to use <a href="https://silviomoreto.github.io/bootstrap-select/examples/" rel="nofollow noreferrer">bootstrap-select</a> in my python flask web page.  Following is the code I currently have.</p>
  <pre><code>&lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/bootstrap.min.css')}}&quot; &gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/font-awesome.min.css')}}&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/main.css')}}&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/sl-slide.css')}}&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='css/bootstrap-select.min.css')}}&quot;&gt;
  
      &lt;script src=&quot;{{ url_for('static', filename='js/jquery-3.2.1.min.js')}}&quot; &gt;&lt;/script&gt;
      &lt;script src=&quot;{{ url_for('static', filename='js/bootstrap.min.js')}}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{{ url_for('static', filename='js/bootstrap-dropdown.js')}}&quot; &gt;&lt;/script&gt;
      &lt;script src=&quot;{{ url_for('static', filename='js/bootstrap-select.js')}}&quot; &gt;&lt;/script&gt;
  
         
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section id=&quot;about-us&quot; class=&quot;container main&quot;&gt;
          &lt;div class=&quot;row-fluid&quot;&gt;
            &lt;div class=&quot;span8&quot; &gt;
              &lt;div class=&quot;blog&quot;&gt;
                &lt;div class=&quot;blog-item well&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;&lt;h2&gt;Heading2&lt;/h2&gt;&lt;/a&gt;
                  &lt;select class=&quot;selectpicker&quot; id=&quot;select_county&quot; data-live-search=&quot;true&quot; data-style=&quot;btn-primary&quot;&gt;
                      &lt;option&gt;County1&lt;/option&gt;
                      &lt;option&gt;County2&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select class=&quot;selectpicker&quot; id=&quot;select_event&quot; data-live-search=&quot;true&quot; data-style=&quot;btn-primary&quot;&gt;
                      &lt;option&gt;event1&lt;/option&gt;
                      &lt;option&gt;event2&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;input type=&quot;submit&quot; class=&quot;btn btn-info&quot; value=&quot;Submit Button&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function(){
          $('.selectpicker').selectpicker('refresh');
         });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Although data-live-search of select works, select is not showing any of the items other than the selected one.</p>
  <p><a href="https://i.stack.imgur.com/twHba.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/twHba.png" alt="enter image description here" /></a></p>
  <p>I even refresh in <code>$(document).ready()</code>. What am I doing wrong?</p>