title: Bootstrap select append function in jQuery
body: <p>I am using a theme for my project. I am facing an issues related to append options in a select using jQuery because of theme's javascript.<br>
  When I append an option to select it doesn't show up although it is added. I found out that this is because a button and div are added above the select after page load. I am pasting 2 (different codes) for reference:    </p>
  
  <p><strong>Actual Code</strong><br>
  <em>The code I did in laravel blade template</em></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value"&gt;
          &lt;option value=""&gt;Contract Types&lt;/option&gt;
          @foreach (\App\ContractType::all() as $ct)
          &lt;option value="{{ $ct-&gt;id }}"&gt;{{ $ct-&gt;type }}&lt;/option&gt;
          @endforeach
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Code inspected in browser</strong><br>
  <em>The code when I inspect element the select in browser</em></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div class="btn-group bootstrap-select search-fields open"&gt;
          &lt;button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="ct" title="Contract Types" aria-expanded="true"&gt;
              &lt;span class="filter-option pull-left"&gt;Contract Types&lt;/span&gt;&amp;nbsp;
                  &lt;span class="bs-caret"&gt;
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="dropdown-menu open" role="combobox" style="max-height: 590px; overflow: hidden; min-height: 158px;"&gt;
              &lt;div class="bs-searchbox"&gt;
                  &lt;input type="text" class="form-control" autocomplete="off" placeholder="Search value" role="textbox" aria-label="Search"&gt;
              &lt;/div&gt;
              &lt;ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 543px; overflow-y: auto; min-height: 111px;"&gt;
                  &lt;li data-original-index="0" class="selected active"&gt;
                      &lt;a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"&gt;
                          &lt;span class="text"&gt;Contract Types&lt;/span&gt;
                          &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li data-original-index="1"&gt;
                      &lt;a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;
                          &lt;span class="text"&gt;Rent&lt;/span&gt;
                          &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li data-original-index="2"&gt;
                      &lt;a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;
                          &lt;span class="text"&gt;Buy&lt;/span&gt;
                          &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li data-original-index="3"&gt;
                      &lt;a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;
                          &lt;span class="text"&gt;Commercial Rent&lt;/span&gt;
                          &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li data-original-index="4"&gt;
                      &lt;a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;
                          &lt;span class="text"&gt;Commercial Buy&lt;/span&gt;
                          &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value" tabindex="-98"&gt;
              &lt;option value=""&gt;Contract Types&lt;/option&gt;
              &lt;option value="1"&gt;Rent&lt;/option&gt;
              &lt;option value="2"&gt;Buy&lt;/option&gt;
              &lt;option value="3"&gt;Commercial Rent&lt;/option&gt;
              &lt;option value="4"&gt;Commercial Buy&lt;/option&gt;                                                                                                    
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because of this, when I try to empty the select and append new options to it using jQuery with another select's on-change event:</p>
  
  <pre><code>$('#c').on('change', function(e){
      var id = e.target.value;
  
      $('#ct').empty();
      $('#ct').append('&lt;option value=""&gt;Contract Types&lt;/option&gt;');
      $('#ct').append('&lt;option value="1"&gt;Rent&lt;/option&gt;');
      $('#ct').append('&lt;option value="2"&gt;Buy&lt;/option&gt;');
      if (id == 1) {
          $('#ct').append('&lt;option value="3"&gt;Commercial Rent&lt;/option&gt;');
          $('#ct').append('&lt;option value="4"&gt;Commercial Buy&lt;/option&gt;');
      }
  });
  </code></pre>
  
  <p>it performs it in select but doesn't show up because of shadowing button &amp; div. I've checked the theme's JS page from where it is doing this but I can't understand the whole function.    </p>