Menu of Country Selection

Question

Is there a component present in Bootstrap 3.3.1 (I don’t think so) that generates a select from all countries? or a plugin? because I am currently using a list with pure HTML that this gigantic, below a small part of the code that I want to replace:

<select name="paises" id="paises">
   <option value="Brasil" selected="selected">Brasil</option>
   <option value="Afeganistão">Afeganistão</option>
   <option value="África do Sul">África do Sul</option>
   <option value="Albânia">Albânia</option>
</select>

Another problem would be to internationalize the whole list

Answer 1

I found a repository on Github with what you’re looking for: https://github.com/umpirsky/country-list. There are others apparently.

The languages available are:

["aa","aa_DJ","aa_ER","aa_ET","af","af_NA","af_ZA","ak","ak_GH","am","am_ET","ar","ar_AE","ar_BH","ar_DZ","ar_EG","ar_IQ","ar_JO","ar_KW","ar_LB","ar_LY","ar_MA","ar_OM","ar_QA","ar_SA","ar_SD","ar_SY","ar_TN","ar_YE","as","as_IN","asa","asa_TZ","az","az_AZ","az_Arab","az_Arab_IR","az_Cyrl","az_Cyrl_AZ","az_IR","az_Latn","az_Latn_AZ","be","be_BY","bem","bem_ZM","bez","bez_TZ","bg","bg_BG","bm","bm_ML","bn","bn_BD","bn_IN","bo","bo_CN","bo_IN","br","br_FR","brx","brx_IN","bs","bs_BA","byn","byn_ER","ca","ca_ES","cch","cch_NG","cgg","cgg_UG","chr","chr_US","cs","cs_CZ","cy","cy_GB","da","da_DK","dav","dav_KE","de","de_AT","de_BE","de_CH","de_DE","de_LI","de_LU","dv","dv_MV","dz","dz_BT","ebu","ebu_KE","ee","ee_GH","ee_TG","el","el_CY","el_GR","el_POLYTON","en","en_AS","en_AU","en_BE","en_BW","en_BZ","en_CA","en_Dsrt","en_Dsrt_US","en_GB","en_GU","en_HK","en_IE","en_IN","en_JM","en_MH","en_MP","en_MT","en_MU","en_NA","en_NZ","en_PH","en_PK","en_SG","en_Shaw","en_TT","en_UM","en_US","en_US_POSIX","en_VI","en_ZA","en_ZW","en_ZZ","eo","es","es_419","es_AR","es_BO","es_CL","es_CO","es_CR","es_DO","es_EC","es_ES","es_GQ","es_GT","es_HN","es_MX","es_NI","es_PA","es_PE","es_PR","es_PY","es_SV","es_US","es_UY","es_VE","et","et_EE","eu","eu_ES","fa","fa_AF","fa_IR","ff","ff_SN","fi","fi_FI","fil","fil_PH","fo","fo_FO","fr","fr_BE","fr_BF","fr_BI","fr_BJ","fr_BL","fr_CA","fr_CD","fr_CF","fr_CG","fr_CH","fr_CI","fr_CM","fr_DJ","fr_FR","fr_GA","fr_GN","fr_GP","fr_GQ","fr_KM","fr_LU","fr_MC","fr_MF","fr_MG","fr_ML","fr_MQ","fr_NE","fr_RE","fr_RW","fr_SN","fr_TD","fr_TG","fur","fur_IT","ga","ga_IE","gaa","gaa_GH","gez","gez_ER","gez_ET","gl","gl_ES","gsw","gsw_CH","gu","gu_IN","guz","guz_KE","gv","gv_GB","ha","ha_Arab","ha_Arab_NG","ha_Arab_SD","ha_GH","ha_Latn","ha_Latn_GH","ha_Latn_NE","ha_Latn_NG","ha_NE","ha_NG","ha_SD","haw","haw_US","he","he_IL","hi","hi_IN","hr","hr_HR","hu","hu_HU","hy","hy_AM","ia","id","id_ID","ig","ig_NG","ii","ii_CN","in","is","is_IS","it","it_CH","it_IT","iu","iw","ja","ja_JP","jmc","jmc_TZ","ka","ka_GE","kab","kab_DZ","kaj","kaj_NG","kam","kam_KE","kcg","kcg_NG","kde","kde_TZ","kea","kea_CV","kfo","kfo_CI","khq","khq_ML","ki","ki_KE","kk","kk_Cyrl","kk_Cyrl_KZ","kk_KZ","kl","kl_GL","kln","kln_KE","km","km_KH","kn","kn_IN","ko","ko_KR","kok","kok_IN","kpe","kpe_GN","kpe_LR","ksb","ksb_TZ","ksh","ksh_DE","ku","ku_Arab","ku_Arab_IQ","ku_Arab_IR","ku_IQ","ku_IR","ku_Latn","ku_Latn_SY","ku_Latn_TR","ku_SY","ku_TR","kw","kw_GB","ky","ky_KG","lag","lag_TZ","lg","lg_UG","ln","ln_CD","ln_CG","lo","lo_LA","lt","lt_LT","luo","luo_KE","luy","luy_KE","lv","lv_LV","mas","mas_KE","mas_TZ","mer","mer_KE","mfe","mfe_MU","mg","mg_MG","mi","mi_NZ","mk","mk_MK","ml","ml_IN","mn","mn_CN","mn_Cyrl","mn_Cyrl_MN","mn_MN","mn_Mong","mn_Mong_CN","mo","mr","mr_IN","ms","ms_BN","ms_MY","mt","mt_MT","my","my_MM","naq","naq_NA","nb","nb_NO","nd","nd_ZW","nds","nds_DE","ne","ne_IN","ne_NP","nl","nl_BE","nl_NL","nn","nn_NO","no","nr","nr_ZA","nso","nso_ZA","ny","ny_MW","nyn","nyn_UG","oc","oc_FR","om","om_ET","om_KE","or","or_IN","pa","pa_Arab","pa_Arab_PK","pa_Guru","pa_Guru_IN","pa_IN","pa_PK","pl","pl_PL","ps","ps_AF","pt","pt_AO","pt_BR","pt_GW","pt_MZ","pt_PT","rm","rm_CH","ro","ro_MD","ro_RO","rof","rof_TZ","ru","ru_MD","ru_RU","ru_UA","rw","rw_RW","rwk","rwk_TZ","sa","sa_IN","saq","saq_KE","se","se_FI","se_NO","seh","seh_MZ","ses","ses_ML","sg","sg_CF","sh","sh_BA","sh_CS","sh_YU","shi","shi_Latn","shi_Latn_MA","shi_MA","shi_Tfng","shi_Tfng_MA","si","si_LK","sid","sid_ET","sk","sk_SK","sl","sl_SI","sn","sn_ZW","so","so_DJ","so_ET","so_KE","so_SO","sq","sq_AL","sr","sr_BA","sr_CS","sr_Cyrl","sr_Cyrl_BA","sr_Cyrl_CS","sr_Cyrl_ME","sr_Cyrl_RS","sr_Cyrl_YU","sr_Latn","sr_Latn_BA","sr_Latn_CS","sr_Latn_ME","sr_Latn_RS","sr_Latn_YU","sr_ME","sr_RS","sr_YU","ss","ss_SZ","ss_ZA","ssy","ssy_ER","st","st_LS","st_ZA","sv","sv_FI","sv_SE","sw","sw_KE","sw_TZ","syr","syr_SY","ta","ta_IN","ta_LK","te","te_IN","teo","teo_KE","teo_UG","tg","tg_Cyrl","tg_Cyrl_TJ","tg_TJ","th","th_TH","ti","ti_ER","ti_ET","tig","tig_ER","tl","tl_PH","tn","tn_ZA","to","to_TO","tr","tr_TR","trv","trv_TW","ts","ts_ZA","tt","tt_RU","tzm","tzm_Latn","tzm_Latn_MA","tzm_MA","ug","ug_Arab","ug_Arab_CN","ug_CN","uk","uk_UA","ur","ur_IN","ur_PK","uz","uz_AF","uz_Arab","uz_Arab_AF","uz_Cyrl","uz_Cyrl_UZ","uz_Latn","uz_Latn_UZ","uz_UZ","ve","ve_ZA","vi","vi_VN","vun","vun_TZ","wal","wal_ET","wo","wo_Latn","wo_Latn_SN","wo_SN","xh","xh_ZA","xog","xog_UG","yo","yo_NG","zh","zh_CN","zh_HK","zh_Hans","zh_Hans_CN","zh_Hans_HK","zh_Hans_MO","zh_Hans_SG","zh_Hant","zh_Hant_HK","zh_Hant_MO","zh_Hant_TW","zh_MO","zh_SG","zh_TW","zu","zu_ZA"]

Not all languages have all countries, but you can select only the ones you’ll use the most. Otherwise you’ll have to complete or search for more, or pay for some service to give you a complete list.

To use this you need to fetch from Github depending on the language, or make a copy on your server that is more secure.

Here’s an example of how to do jQuery using this Github repository.

jsFiddle: http://jsfiddle.net/pru0zw6j/

The relevant code is:

HTML

<select name="lingua" id="linguas"></select>
<select name="paises" id="paises"></select>

JS

var linguas = ["aa", "aa_DJ", "aa_ER", "aa_ET", etc.... // a array que coloquei em cima
var select_linguas = $('#linguas');
linguas.forEach(function (lingua) {
    select_linguas.append('<option value="' + lingua + '">' + lingua + '</option>');
});

select_linguas.on('change', function () {
    var lingua = this.value;
    $.ajax({
        url: "https://rawgit.com/umpirsky/country-list/master/country/cldr/" + lingua + "/country.json",           
        dataType: "json"
    }).done(function (data) {
        var novosPaises = Object.keys(data).map(function (lingua) {
            return '<option value="' + lingua + '">' + data[lingua] + '</option>';
        });
        $('#paises').html(novosPaises);
    });
});

To use on your own server:

(the safest option) you can do so:

Copies the files to the server and creates a PHP file to read JSON. A simple example:

le_json.php

$json_file = file_get_contents('country.json');
echo $json_file;

index php.

$.ajax({
        url:"le_json.php",
        cache: false,
        dataType: "json"
    }).done(function (dados) {
    console.log(typeof dados)
         for (codigo in dados){
        $('body').append('<div>' + dados[codigo] + ', ' + codigo + '</div>'); 
    }; 
});

This way it works even in old IE8.
Example I created on an onlline server: http://goo.gl/JlvpF3