Bootstrap select

by Zakaria Acharki

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<div class="form-group car-list">
  <label class="col-md-3 control-label">Select car #1</label>
  <div class="col-md-9">
    <div class="input-group">
      <select class="select-car selectpicker" data-live-search="true">
        <option></option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
      </select>
    </div>
  </div>
</div>

<div id="select-model" class="hide">
  <select class="select-car" data-live-search="true">
    <option></option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
  </select>
</div>
<button id="add">Add</button>

CSS

.category {
  margin-left: -12px;
  font-size: 1.3em;
  /*safari won't respect many/any of these but color?*/
  /*font-style: italic;*/
  font-weight: bold !important;
  color: #000000 !important;
  /*straight black makes it pop*/
  /*background: #000;*/
}

JavaScript

$('#add').click(function() {
  var n = $('.car-list').length + 1;
  var temp = $('.form-group:last').clone(true).removeClass('select-car');
  $('.control-label:first', temp).html('Select car #' + n);
  $('.input-group', temp).html($('#select-model').html());
  $('.select-car', temp).selectpicker();

  $('.form-group:last').after(temp);
});