var base = '';

$(document).ready(function(){

    //attach the change event
    $("#select_country").change(loadCities);
    $("#select_city").change(loadArea);
});

function loadCities (){
    //when country selected
    if ($("#select_country").val()) {
        loadingElement('select_city');
        resetElement('select_area');
        $("#select_city").load(base+'/getCityArea.php?countryName='+ $("#select_country").val());
        $("#select_city").attr('disabled', false);
    }
}

function loadArea () {
    //when city selected
    if ($("#select_city").val()) {
        loadingElement('select_area');
        $("#select_area").load(base+'/getCityArea.php?areaName='+ $("#select_city").val());
        $("#select_area").attr('disabled', false);
    }
}

function loadingElement(elemID) {
    var element = window.document.getElementById(elemID);

    var length = element.length;
    for (var i=0; i < length; ++i){
        element[i] = null;
    }
    element.length = 0;
    element[0] = new Option('Loading '+ $("#"+elemID).attr('name') +'...','loading');
    element.disabled=true;
}


function resetElement(elemID){
    var element = window.document.getElementById(elemID);

    var length = element.length;
    for (var i=0; i < length; ++i){
        element[i] = null;
    }
    element.length = 0;
    element[0] = new Option('Select '+ $("#"+elemID).attr('name'),'-1');
    element.disabled=true;
}