<script>
  $(document).ready(function(){
    // COUNTRY SELECT
    $("#countryId").live("change", function(){
      var pk_c_code = $(this).val();
      var url = 'https://zara.mb-themes.com/index.php?page=ajax&action=regions&countryId=' + pk_c_code;
      var result = '';
      if(pk_c_code != '') {
        // Country has been selected
        $.ajax({
          type: "POST",
          url: url,
          dataType: 'json',
          success: function(data) {
            var length = data.length;
            if(length > 0) {
              result += '<option value="">Select a region</option>';
              for(key in data) {
                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
              }
              $("#sRegion-side").before('<select name="sRegion" id="regionId" ><option selected="selected" value="">Select a region</option></select>').remove();
              $("#sCity-side").before('<select name="sCity" id="cityId"><option selected="selected" value="">Select a city</option></select>').remove();
             
              $("#regionId").val("").html(result).attr('disabled',false);
              $("#cityId").val("").attr('disabled',true);
            } else {
              $("#regionId").before('<input placeholder="Enter a region" type="text" name="sRegion" id="sRegion-side" />').remove();
              $("#cityId").before('<input placeholder="Enter a city" type="text" name="sCity" id="sCity-side" />').remove();;
              $("#sRegion-side").val('').attr('disabled',false);
              $("#sCity-side").val('').attr('disabled',true);
            }
            $("#cityId").html('<option selected="selected" value="">Select a city</option>');
          }
        });
      } else {
        // Country is empty
        $("#sRegion-side").before('<select name="sRegion" id="regionId"><option selected="selected" value="">Select a region</option></select>').remove();
        $("#regionId").html('<option selected="selected" value="">Select a region</option>').attr('disabled',true);
        $("#sCity-side").before('<select name="sCity" id="cityId" ><option selected="selected" value="">Select a city</option></select>').remove();
        $("#cityId").html('<option selected="selected" value="">Select a city</option>').attr('disabled',true);
       }
    });
    // REGION SELECTION
    $("#regionId").live("change", function(){
      var pk_r_id = $(this).val();
      var url = 'https://zara.mb-themes.com/index.php?page=ajax&action=cities®ionId=' + pk_r_id;
      var result = '';
      if(pk_r_id != '') {
        // Region has been selected
        $.ajax({
          type: "POST",
          url: url,
          dataType: 'json',
          success: function(data){
            var length = data.length;
            if(length > 0) {
              result += '<option selected="selected" value="">Select a city</option>';
              for(key in data) {
                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
              }
              $("#sCity-side").before('<select name="sCity" id="cityId"><option value="" selected="selected">Select a city</option></select>').remove();
              $("#cityId").val("").html(result).attr('disabled',false);
            } else {
              $("#cityId").before('<input type="text" placeholder="Enter a city" name="sCity" id="sCity-side" />').remove().val('').attr('disabled',false);
            }
          }
        });
      } else {
        // Region is empty
        $("#sCity-side").before('<select name="sCity" id="cityId"><option selected="selected" value="">Select a city</option></select>').remove();
        $("#cityId").html('<option selected="selected" value="">Select a city</option>').attr('disabled',true);
      }
    });
    // MANAGE REGION & CITY INPUTS
    $("input#sRegion-side").live("change", function(){
      if( $(this).val() != '' ) {
        $("input#sCity-side").attr('disabled',false).val("");
      } else {
        $("input#sCity-side").attr('disabled',true).val("");
      }
    });
    // ONLOAD FIXES
    if($("#countryId").length != 0) {
      if( $("#countryId").attr('value') != "")  {
        $("#regionId, #sRegion-side, #cityId, #sCity-side").attr('disabled',false);
      } else {
        $("#regionId, #sRegion-side, #cityId, #sCity-side").attr('disabled',true);
      }
    }
    if($("#country").length != 0) {
      $("#regionId, #region").attr('disabled',false);
    }
    if( $("#regionId").attr('value') != "")  {
      $("#cityId, #sCity-side").attr('disabled',false);
    } else {
      $("#cityId, #sCity-side").attr('disabled',true);
    }
  });
</script>