title: Bootstrap-Select js plugin not showing selected item from drop down
body: <p>I am using the bootstrap-select jQuery plugin</p>
  
  <ul>
  <li><a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow noreferrer">http://silviomoreto.github.io/bootstrap-select/</a></li>
  <li>Version 1.6.3</li>
  </ul>
  
  <p>My page contains the JS (see bottom) to populate and show the items selected from a sequence of drop downs:</p>
  
  <pre><code>&lt;form role="form"&gt;
      &lt;div class="form-group" id="SearchOptions" style="display: none;"&gt;
          &lt;select id="ddlLocations" class="selectpicker show-tick" data-width="100%" data-size="50"&gt;
              &lt;option value="0"&gt;All Ports&lt;/option&gt;
              &lt;option class="divider" disabled="disabled"&gt;&lt;/option&gt;
              @{
                  foreach (DepartFromItemBriefDto departFrom in Model.DepartFroms.Items)
                  {
                      &lt;option value="@departFrom.PortName"&gt;@departFrom.PortName&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
          &lt;select id="ddlDates" class="selectpicker show-tick" data-width="100%" data-size="50"&gt;
              &lt;option value="0"&gt;All Dates&lt;/option&gt;
              &lt;option class="divider" disabled="disabled"&gt;&lt;/option&gt;
              @{
                  foreach (DepartMonthItemBriefDto departMonth in Model.DepartMonths.Items)
                  {
                      &lt;option value="@departMonth.Id"&gt;@departMonth.Description&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
          &lt;select id="ddlBrands" class="selectpicker show-tick" data-width="100%" data-size="50"&gt;
              &lt;option value="0"&gt;All Brands&lt;/option&gt;
              &lt;option class="divider" disabled="disabled"&gt;&lt;/option&gt;
              @{
                  foreach (CruiseBrandItemBriefDto cruiseBrand in Model.CruiseBrands.Items)
                  {
                      &lt;option value="@cruiseBrand.Id"&gt;@cruiseBrand.Description&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
          &lt;select id="ddlShips" class="selectpicker show-tick" data-width="100%" data-size="10"&gt;
              &lt;option value="0"&gt;All Ships&lt;/option&gt;
              &lt;option class="divider" disabled="disabled"&gt;&lt;/option&gt;
              @{
                  foreach (ShipItemBriefDto ship in Model.Ships.Items)
                  {
                      &lt;option value="@ship.Id"&gt;@ship.Description&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;a class="btn btn-search btn-block" href="/CruiseSearch/Search" role="button"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="phone"&gt; Search&lt;/span&gt;&lt;/a&gt;
  &lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
          //Hook up all the change events
          $("#ddlBrands").change(function() {
              $.get("/CruiseSearch/CruiseBrandSelected", { aBrandId: $(this).val() });
  
              //Get the list of ships within the brand
              var $jqGetShipList = $.get("/CruiseSearch/GetShipsListByBrand", { aBrandId: $(this).val() });
              $jqGetShipList.done(function(aData) {
                  var $shipsDropDown = $('#ddlShips');
                  $shipsDropDown.empty();
  
                  $.each(aData, function(aNdx, aItem) {
                      $shipsDropDown.append($("&lt;option&gt;&lt;/option&gt;")
                          .attr("value", aItem.Id)
                          .text(aItem.Value));
                  });
  
                  //Ensure the styling on the drop down refreshes itself
                  $shipsDropDown.selectpicker('refresh');
              });
          });
  
          $("#ddlDates").change(function() {
              $.get("/CruiseSearch/DepartMonthSelected", { aDateId: $(this).val() });
          });
  
          $("#ddlLocations").change(function() {
              $.get("/CruiseSearch/DepartFromSelected", { aPortName: $(this).val() });
          });
  
          $("#ddlShips").change(function() {
              $.get("/CruiseSearch/ShipSelected", { aShipId: $(this).val() });
          });
  
          //As we can come in here via a navigation backwards in the browser history ensure they are all called once
          //so that the front end and the back end match up
          $("#ddlBrands").change();
          $("#ddlDates").change();
          $("#ddlLocations").change();
          $("#ddlShips").change();
  
          //Only after we have finished populating and updating the selects do we show them
          //Prevents flicker on certain mobile devices and their native browsers
          $('#SearchOptions').toggle();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I display the page and make a selection from Brand (which ultimately populates the ship drop down) and I then select a ship, so that I end up with:</p>
  
  <p><img src="https://i.stack.imgur.com/7FNvs.png" alt="After making selection"></p>
  
  <p>I press a button to perform the search and then I have a link which navigates back in the browser history with:</p>
  
  <pre><code>javascript:history.go(-1);
  </code></pre>
  
  <p>however the page now has the ship showing as "All Selected" as per:</p>
  
  <p><img src="https://i.stack.imgur.com/22dwF.png" alt="enter image description here"></p>
  
  <p>this despite the console output showing that I have ship selected in the drop down (All ships has a value of zero):</p>
  
  <p><img src="https://i.stack.imgur.com/95doo.png" alt="enter image description here"></p>
  
  <p>The documentation for bootstrap-select says to call 'Render' if you update the value of the select which I have done. So can anyone point me in the right direction as to why the drop down is not showing the correct (ie selected value) value?</p>