select2.js multiple

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<select id="color" style="width:300px">
  <option></option>
  <option value="AL">select 1 installments of $100.(not a special offer)</option>
  <option value="Am">select 2 installments of $100.(special offer)</option>
  <option value="An">select 3 installments of $100.(special offer)</option>
  <option value="Ak">select 4 installments of $100.(not a special offer)</option>
  <option value="WY">select 5 installments of $100.(not a special offer)</option>
</select>

CSS

.colorBox {
  display: inline-block;
  border: 1px solid black;
  height: 14px;
  width: 14px;
}

JavaScript

function formatDesign(item) {
  var selectionText = item.text.split(".");
  var $returnString = selectionText[0] + "</br>" + selectionText[1];
  return $returnString;
};



$('#color').select2({
  placeholder: "Select something",
  formatResult: formatDesign,
  formatSelection: formatDesign
});