Select2 display optgroup value and concatenated option

Question

I’m creating a selection field where the user can choose between multiple states, but I need to show when selected both the optgroup value and the option value, have as?

Remembering that I am using the library Select2

follows the base html

<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>

and the js call for Select2 to work

$("#estados").select2();

follows an example in jsfiddle

realize that when choosing a state it shows the name of the state, but would need to show both the region and the state, for example, Suldeste - São Paulo.

Answer 1

Here on this reply So-English deals with your problem, specifically in this one jsfiddle which I thought was the best, but only works with simple selection.

With the help of the author of the question jsFiddle and with that question in English-OS we adapt the code to work for Multiple select;

Add:

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; }
});