select2 with i18n

by Danilo Pádua

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.9.0/i18next.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<div id="selects">
<h3>Com select2</h3>
<select id="selectTipo" class="form-control"></select>

<h3>Sem select2</h3>
<select class="form-control">
    <option value=0 data-i18n="valor1"></option>
    <option value=1 data-i18n="valor2"></option>
    <option value=2 data-i18n="valor3"></option>
    <option value=3 data-i18n="valor4"></option>
    <option value=4 data-i18n="valor5"></option>
</select>
</div>

CSS

#selects select {
    width: 150px;
}

JavaScript

var resources = {
    "pt": {
        "translation": {
            valor1: "Valor 1",
            valor2: "Valor 2",
            valor3: "Valor 3",
            valor4: "Valor 4",
            valor5: "Valor 5"
        }
    }
};

$(document).ready(function () {
    i18n.init({
        "lng": 'pt',
        "resStore": resources,
        "fallbackLng" : 'pt'
    }, function (t) {
        $(document).i18n();
    });
    
    $('#selectTipo').html('<option value=0 data-i18n="valor1"></option>'+
                         '<option value=1 data-i18n="valor2"></option>' +
                         '<option value=2 data-i18n="valor3"></option>' +
                         '<option value=3 data-i18n="valor4"></option>' +
                         '<option value=4 data-i18n="valor5"></option>');
    
    //Solução do problema ao carregar o select2
    //Agradecido amigo Otto, segue o perfil galera
    //http://pt.stackoverflow.com/users/433/otto
    $(document).i18n();
    $('#selectTipo').select2();
});