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

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