dynamic bootstrap select

adding items dynamically with optgroup

by David Underwood

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.4/js/bootstrap-select.min.js"></script>
<div>
  <a id="populate" class="btn btn-primary">Populate Combo</a>
</div>
<div>
  <hr>
</div>

<select id="myselect" style="display:none">
</select>

JavaScript

$("#populate").click(function() {
  $('#myselect').show();

  var newitemnum = 1;
  var newitemdesc = "My Test Item";
  var toAdd = "";
  toAdd += '<optgroup label="My Group">';
  toAdd += '<option data-subtext="My Group" value="' + newitemnum + '" selected="">' + newitemdesc + '</option>';
  toAdd += '</optgroup>';
  $("#myselect").append(toAdd);
  // $("#myselect").selectpicker("refresh");

  $("#myselect").selectpicker({
    showSubtext: true,
   liveSearch: true
  });

});