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">
<select name="estados[]" id="estados" multiple  style="width:300px">
  <optgroup label="Suldeste">
    <option value="SP">São Paulo</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="MG">Minas Gerais</option>
    <option value="ES">Espírito Santo</option>
  </optgroup>
  <optgroup label="Sul">
    <option value="PR">Paraná</option>
    <option value="SC">Santa Catarina</option>
    <option value="RS">Rio Grande do Sul</option>
  </optgroup>
  <optgroup label="Nordeste">
    <option value="AL">Alagoas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="MA">Maranhão</option>
    <option value="PB">Paraíba</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="SE">Sergipe</option>
  </optgroup>
  <optgroup label="Centro-Oeste">
    <option value="DF">Distrito Federal</option>
    <option value="GO">Goiás</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
  </optgroup>
  <optgroup label="Norte">
    <option value="AM">Amazonas</option>
    <option value="AC">Acre</option>
    <option value="RR">Roraima</option>
    <option value="RO">Rondônia</option>
    <option value="AP">Amapá</option>
    <option value="PA">Pará</option>
    <option value="TO">Tocantins</option>
  </optgroup>
</select>

JavaScript

function format(item) {
	  var el = item.element;		
    var og = $(el).closest('optgroup').attr('label');    
    return og+'-'+item.text;
}

$("#estados").select2({
	formatSelection: format,
	escapeMarkup: function(m) { return m; }
});