Country Selection Menu

2

Is there any component present in Bootstrap 3.3.1 (I think not) that manages a select from all countries? or some 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 entire list

    
asked by anonymous 25.12.2014 / 13:19

1 answer

3

I found a repository on Github that you are looking for: link . There are others by sight .

Available languages 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 languages you will use the most. Otherwise you will have to complete or look for more, or pay some service to give you a complete list.

To use this you need to get GitHub depending on the language, or make a copy on your server that is safer.

Here is an example of how to do with jQuery using this GitHub repository.

jsFiddle: link

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

Copy the files to the server and create a PHP file to read the 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 the old IE8. Example that I created on an onlline server: link

    
25.12.2014 / 14:57