Mozillians Country Select

by Wray Bowling

HTML

<select name="country" id="id_country">
<option value="">----</option>
<option value="af">Afghanistan</option>
<option value="al">Albania</option>
<option value="dz">Algeria</option>
<option value="as">American Samoa</option>
<option value="ad">Andorra</option>
<option value="ao">Angola</option>
<option value="ai">Anguilla</option>
<option value="aq">Antarctica</option>
<option value="ag">Antigua and Barbuda</option>
<option value="ar">Argentina</option>
<option value="am">Armenia</option>
<option value="aw">Aruba</option>
<option value="au">Australia</option>
<option value="at">Austria</option>
<option value="az">Azerbaijan</option>
<option value="bs">Bahamas</option>
<option value="bh">Bahrain</option>
<option value="bd">Bangladesh</option>
<option value="bb">Barbados</option>
<option value="by">Belarus</option>
<option value="be">Belgium</option>
<option value="bz">Belize</option>
<option value="bj">Benin</option>
<option value="bm">Bermuda</option>
<option value="bt">Bhutan</option>
<option value="bo">Bolivia</option>
<option value="ba">Bosnia and Herzegovina</option>
<option value="bw">Botswana</option>
<option value="bv">Bouvet Island</option>
<option value="br">Brazil</option>
<option value="io">British Indian Ocean Territory</option>
<option value="vg">British Virgin Islands</option>
<option value="bn">Brunei Darussalam</option>
<option value="bg">Bulgaria</option>
<option value="bf">Burkina Faso</option>
<option value="bi">Burundi</option>
<option value="kh">Cambodia</option>
<option value="cm">Cameroon</option>
<option value="ca">Canada</option>
<option value="cv">Cape Verde</option>
<option value="ky">Cayman Islands</option>
<option value="cf">Central African Republic</option>
<option value="td">Chad</option>
<option value="cl">Chile</option>
<option value="cn">China</option>
<option value="cx">Christmas Island</option>
<option value="cc">Cocos (Keeling) Islands</option>
<option value="co">Colombia</option>
<option value="km">Comoros</option>
<option...

CSS

select{
    width: 100%;
}

JavaScript

//http://api.geonames.org/search?name_startsWith=lon&country=GB&maxRows=10&username=wbowling

function geoNames(options){
    $.ajax({
        url: 'http://api.geonames.org/searchJSON',
        data: {
            username: 'wbowling'
            ,country: options.country
            ,placename : options.region
//            ,name: options.region
        },
        dataType: 'json'
    })
    .error(function(message){
        console.error('fail',message);
    })
    .success(function(data){
        console.log(data);

        if(options.region === undefined){
            $('#id_region').attr('disabled',false);
            for( var i=0; i<data.geonames.length; i++){
                                $('#id_region').append('<option>'+data.geonames[i].name+'</option>');
            }
        }else{
            $('#id_city').attr('disabled',false);
            for( var i=0; i<data.geonames.length; i++){
                                $('#id_city').append('<option>'+data.geonames[i].name+'</option>');
            }
        }
                
        
    });
}


var country_el = $('#id_country');
var region_el = $('#id_region');
var city_el = $('#id_city');

country_el.on({
    change:function(){
         $('#id_region').attr('disabled',true).children().remove();
         $('#id_city').attr('disabled',true).children().remove();
        geoNames({country:this.value});
    }
});

region_el.on({
    change:function(){
         $('#id_city').attr('disabled',true).children().remove();
        geoNames({country:country_el.value, region:this.value});
    }
});