├── README.md
├── demo.html
├── classes
    ├── dbconfig.php
    └── location.php
├── api.php
├── index.html
├── css
    └── custom.css
└── js
    └── location.js


/README.md:
--------------------------------------------------------------------------------
1 | #php and ajax based dropdown list of country, state and city
2 | A simple oops based php and ajax country state city dropdown list
3 | 
4 | Technology Used: PHP, Mysql, Jquery
5 | 
6 | 
7 | Demo Link: http://www.iamrohit.in/tag/php-ajax-country-state-city-dropdown
8 | 
9 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <select name="country" class="countries" id="countryId">
 2 |     <option value="">Select Country</option>
 3 | </select>
 4 | <select name="state" class="states" id="stateId">
 5 |      <option value="">Select State</option>
 6 | </select>
 7 | <select name="city" class="cities" id="cityId">
 8 |    <option value="">Select City</option>
 9 | </select>
10 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
11 | <script src="http://lab.iamrohit.in/js/location.js"></script>   
12 | 
13 | 


--------------------------------------------------------------------------------
/classes/dbconfig.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | class dbconfig {
 3 |   // database hostname 
 4 |   protected static $host = "localhost";
 5 |   // database username
 6 |   protected static $username = "root";
 7 |   // database password
 8 |   protected static $password = "root";
 9 |   //database name
10 |   protected static $dbname = "crm";
11 | 
12 |   static $con;
13 | 
14 |   function __construct() {
15 |     self::$con = self::connect(); 
16 |   }
17 |   
18 |   // open connection
19 |   protected static function connect() {
20 |      try {
21 |        $link = mysqli_connect(self::$host, self::$username, self::$password, self::$dbname); 
22 |         if(!$link) {
23 |           throw new exception(mysqli_error($link));
24 |         }
25 |         return $link;
26 |      } catch (Exception $e) {
27 |        echo "Error: ".$e->getMessage();
28 |      } 
29 |   }
30 | 
31 |  // close connection
32 |   public static function close() {
33 |      mysqli_close(self::$con);
34 |   }
35 | 
36 |   public static function run($query) {
37 |     try {
38 |       if(empty($query) && !isset($query)) {
39 |         throw new exception("Query string is not set.");
40 |       }
41 |       $result = mysqli_query(self::$con, $query);
42 |       self::close();
43 |      return $result;
44 |     } catch (Exception $e) {
45 |       echo "Error: ".$e->getMessage();
46 |     }
47 |      
48 |   } 
49 | 
50 | }


--------------------------------------------------------------------------------
/api.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | * Author: Rohit Kumar
 4 | * Website: iamrohit.in
 5 | * Version: 0.0.1
 6 | * Date: 25-04-2015
 7 | * App Name: Php+ajax country state city dropdown
 8 | * Description: A simple oops based php and ajax country state city dropdown list
 9 | */
10 | error_reporting(0);
11 | ob_start();
12 | header("Access-Control-Allow-Origin: *");
13 | header('Content-Type: application/json');
14 | include_once("classes/location.php");
15 | 
16 | $loc = new location();			
17 | 
18 | try {
19 |   if(!isset($_GET['type']) || empty($_GET['type'])) {
20 |   	throw new exception("Type is not set.");
21 |   }
22 |   $type = $_GET['type'];
23 |   if($type=='getCountries') {
24 |   	$data = $loc->getCountries();
25 |   } 
26 | 
27 |   if($type=='getStates') {
28 |   	 if(!isset($_GET['countryId']) || empty($_GET['countryId'])) {
29 |   	 	throw new exception("Country Id is not set.");
30 |   	 }
31 |   	 $countryId = $_GET['countryId'];
32 |   	 $data = $loc->getStates($countryId);
33 |   }
34 | 
35 |    if($type=='getCities') {
36 |   	 if(!isset($_GET['stateId']) || empty($_GET['stateId'])) {
37 |   	 	throw new exception("State Id is not set.");
38 |   	 }
39 |      $stateId = $_GET['stateId'];
40 |   	 $data = $loc->getCities($stateId);
41 |   }
42 | 
43 | } catch (Exception $e) {
44 |    $data = array('status'=>'error', 'tp'=>0, 'msg'=>$e->getMessage());
45 | } finally {
46 |   echo json_encode($data);
47 | }
48 | 
49 | ob_flush();
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en-US">
 4 |     <head>
 5 |         <title>php ajax country state city dropdown</title>
 6 |         <meta charset="utf-8">
 7 |         <meta name="Keywords" content="php ajax country state city dropdown">
 8 |         <meta name="Description" content="php ajax country state city dropdown">
 9 |         <link href="css/custom.css" rel="stylesheet">
10 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
11 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
12 |     </head>
13 |     <body>
14 |         <form action="#" role="form" class="form-horizontal" id="location" method="post" accept-charset="utf-8">
15 |         <div class="form-group"> 
16 |     <div class="col-sm-4">
17 |         <select name="country" class="form-control countries" id="countryId" required="required">
18 | <option value="">Select Country</option>
19 | </select>
20 |     </div>
21 | </div>
22 |  <div class="form-group"> 
23 |  <div class="col-sm-4">
24 |         <select name="state" class="form-control states" id="stateId" required="required">
25 | <option value="">Select State</option>
26 | </select>
27 |     </div>
28 | </div>
29 |  <div class="form-group"> 
30 |  <div class="col-sm-4">
31 |         <select name="city" class="form-control cities" id="cityId" required="required">
32 | <option value="">Select City</option>
33 | </select>
34 |     </div>
35 | </div>
36 | </form>
37 | 
38 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
39 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
40 |     <script src="js/location.js"></script>   
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/css/custom.css:
--------------------------------------------------------------------------------
  1 |   #contextFirst {
  2 |         width: 96%;
  3 |           height: 60%;
  4 |           margin: 1% 2%;
  5 |        }
  6 |        
  7 |        #chatBox {
  8 |          width:100%;
  9 |          
 10 |          padding-top:1%;
 11 |        }
 12 |        
 13 |        
 14 |        barch:nth-child(odd) { background: #eee; }
 15 | 
 16 |   
 17 |    #context {
 18 |        margin-top:2%;
 19 |           width: 100%; 
 20 |        }
 21 |        
 22 |        #chatBox {
 23 |          width:100%;
 24 |          
 25 |        
 26 |        }
 27 |        
 28 |   .bottombar {
 29 |     position: fixed;
 30 |     z-index: 100; 
 31 |     top: 0; 
 32 |     left: 0;
 33 |     width: 100%;
 34 |     background-color: #333333;
 35 |     text-align:center;
 36 |     color:#ffffff;
 37 |   }
 38 |   
 39 |   #leftbar {
 40 |     float:left;
 41 |     width: 17%;
 42 |     margin-left:1%;
 43 |   }
 44 |   
 45 |   #rightbar {
 46 |    float:right;
 47 |     width: 20%;
 48 |     margin-right:1%;
 49 |   }
 50 |   
 51 |   .left {
 52 |     float:left;
 53 |     margin-left:1%;
 54 |   }
 55 |   
 56 |   .right {
 57 |     float:right;
 58 |     margin-right:1%;
 59 |   }
 60 |   
 61 | 
 62 |  .bar {
 63 |     height:400px;
 64 |     overflow-y:auto; 
 65 |     position:relative;
 66 |    
 67 |   } 
 68 |   
 69 |   #barch {
 70 |     height:430px;
 71 |     overflow-y:auto;
 72 |     position:relative;
 73 |   } 
 74 |   
 75 |   #chatbar {
 76 |   float:left;
 77 |     width: 59%;
 78 |     height:80%;
 79 |     margin-left:1%;    
 80 |   }
 81 |   
 82 |  .bubble-content {
 83 | position:relative;
 84 | float:left;
 85 | margin-left:12px;
 86 | height:auto;
 87 | width:95%;
 88 | padding:5px 20px;
 89 | border-radius:10px;
 90 | background-color:#FFFFFF;
 91 | box-shadow:1px 1px 5px rgba(0,0,0,.2);
 92 | }
 93 | .bubble-content-txt {
 94 | position:relative;
 95 | float:left;
 96 | margin-left:12px;
 97 | height:auto;
 98 | width:95%;
 99 | padding:5px 20px;
100 | border-radius:10px;
101 | background-color:#FFFFFF;
102 | 
103 | }
104 | 
105 | .pchatme {
106 |  color:green;
107 |  font-size:18px;
108 | }
109 | 
110 | #butt {
111 |   width:20px;
112 |   height:20px;
113 |   background: url('images/scrollUp.png');
114 |   position:fixed;
115 |   top:50%;
116 | 
117 |   right: 10%;
118 | }
119 | 
120 |   
121 |   
122 | 
123 | 
124 | 
125 | 
126 |   
127 |   
128 | 


--------------------------------------------------------------------------------
/classes/location.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | * Author: Rohit Kumar
 4 | * Website: iamrohit.in
 5 | * Version: 0.0.1
 6 | * Date: 25-04-2015
 7 | * App Name: Php+ajax country state city dropdown
 8 | * Description: A simple oops based php and ajax country state city dropdown list
 9 | */
10 | require_once("dbconfig.php");
11 | class location extends dbconfig {
12 |    
13 |    public static $data;
14 | 
15 |    function __construct() {
16 |      parent::__construct();
17 |    }
18 |  
19 |  // Fetch all countries list
20 |    public static function getCountries() {
21 |      try {
22 |        $query = "SELECT id, name FROM countries";
23 |        $result = dbconfig::run($query);
24 |        if(!$result) {
25 |          throw new exception("Country not found.");
26 |        }
27 |        $res = array();
28 |        while($resultSet = mysqli_fetch_assoc($result)) {
29 |         $res[$resultSet['id']] = $resultSet['name'];
30 |        }
31 |        $data = array('status'=>'success', 'tp'=>1, 'msg'=>"Countries fetched successfully.", 'result'=>$res);
32 |      } catch (Exception $e) {
33 |        $data = array('status'=>'error', 'tp'=>0, 'msg'=>$e->getMessage());
34 |      } finally {
35 |         return $data;
36 |      }
37 |    }
38 | 
39 |   // Fetch all states list by country id
40 |   public static function getStates($countryId) {
41 |      try {
42 |        $query = "SELECT id, name FROM states WHERE country_id=".$countryId;
43 |        $result = dbconfig::run($query);
44 |        if(!$result) {
45 |          throw new exception("State not found.");
46 |        }
47 |        $res = array();
48 |        while($resultSet = mysqli_fetch_assoc($result)) {
49 |         $res[$resultSet['id']] = $resultSet['name'];
50 |        }
51 |        $data = array('status'=>'success', 'tp'=>1, 'msg'=>"States fetched successfully.", 'result'=>$res);
52 |      } catch (Exception $e) {
53 |        $data = array('status'=>'error', 'tp'=>0, 'msg'=>$e->getMessage());
54 |      } finally {
55 |         return $data;
56 |      }
57 |    }
58 | 
59 |  // Fetch all cities list by state id
60 |   public static function getCities($stateId) {
61 |      try {
62 |        $query = "SELECT id, name FROM cities WHERE state_id=".$stateId;
63 |        $result = dbconfig::run($query);
64 |        if(!$result) {
65 |          throw new exception("City not found.");
66 |        }
67 |        $res = array();
68 |        while($resultSet = mysqli_fetch_assoc($result)) {
69 |         $res[$resultSet['id']] = $resultSet['name'];
70 |        }
71 |        $data = array('status'=>'success', 'tp'=>1, 'msg'=>"Cities fetched successfully.", 'result'=>$res);
72 |      } catch (Exception $e) {
73 |        $data = array('status'=>'error', 'tp'=>0, 'msg'=>$e->getMessage());
74 |      } finally {
75 |         return $data;
76 |      }
77 |    }   
78 | 
79 | 
80 | }
81 | 


--------------------------------------------------------------------------------
/js/location.js:
--------------------------------------------------------------------------------
  1 | 
  2 |     function ajaxCall() {
  3 |         this.send = function(data, url, method, success, type) {
  4 |           type = type||'json';
  5 |           var successRes = function(data) {
  6 |               success(data);
  7 |           };
  8 | 
  9 |           var errorRes = function(e) {
 10 |               console.log(e);
 11 |               alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
 12 |           };
 13 |             $.ajax({
 14 |                 url: url,
 15 |                 type: method,
 16 |                 data: data,
 17 |                 success: successRes,
 18 |                 error: errorRes,
 19 |                 dataType: type,
 20 |                 timeout: 60000
 21 |             });
 22 | 
 23 |           }
 24 | 
 25 |         }
 26 | 
 27 | function locationInfo() {
 28 |     var rootUrl = "api.php";
 29 |     var call = new ajaxCall();
 30 |     this.getCities = function(id) {
 31 |         $(".cities option:gt(0)").remove();
 32 |         var url = rootUrl+'?type=getCities&stateId=' + id;
 33 |         var method = "post";
 34 |         var data = {};
 35 |         $('.cities').find("option:eq(0)").html("Please wait..");
 36 |         call.send(data, url, method, function(data) {
 37 |             $('.cities').find("option:eq(0)").html("Select City");
 38 |             if(data.tp == 1){
 39 |                 $.each(data['result'], function(key, val) {
 40 |                     var option = $('<option />');
 41 |                     option.attr('value', key).text(val);
 42 |                     $('.cities').append(option);
 43 |                 });
 44 |                 $(".cities").prop("disabled",false);
 45 |             }
 46 |             else{
 47 |                  alert(data.msg);
 48 |             }
 49 |         });
 50 |     };
 51 | 
 52 |     this.getStates = function(id) {
 53 |         $(".states option:gt(0)").remove(); 
 54 |         $(".cities option:gt(0)").remove(); 
 55 |         var url = rootUrl+'?type=getStates&countryId=' + id;
 56 |         var method = "post";
 57 |         var data = {};
 58 |         $('.states').find("option:eq(0)").html("Please wait..");
 59 |         call.send(data, url, method, function(data) {
 60 |             $('.states').find("option:eq(0)").html("Select State");
 61 |             if(data.tp == 1){
 62 |                 $.each(data['result'], function(key, val) {
 63 |                     var option = $('<option />');
 64 |                     option.attr('value', key).text(val);
 65 |                     $('.states').append(option);
 66 |                 });
 67 |                 $(".states").prop("disabled",false);
 68 |             }
 69 |             else{
 70 |                 alert(data.msg);
 71 |             }
 72 |         }); 
 73 |     };
 74 | 
 75 |     this.getCountries = function() {
 76 |         var url = rootUrl+'?type=getCountries';
 77 |         var method = "post";
 78 |         var data = {};
 79 |         $('.countries').find("option:eq(0)").html("Please wait..");
 80 |         call.send(data, url, method, function(data) {
 81 |             $('.countries').find("option:eq(0)").html("Select Country");
 82 |             console.log(data);
 83 |             if(data.tp == 1){
 84 |                 $.each(data['result'], function(key, val) {
 85 |                     var option = $('<option />');
 86 |                     option.attr('value', key).text(val);
 87 |                     $('.countries').append(option);
 88 |                 });
 89 |                 $(".countries").prop("disabled",false);
 90 |             }
 91 |             else{
 92 |                 alert(data.msg);
 93 |             }
 94 |         }); 
 95 |     };
 96 | 
 97 | }
 98 | 
 99 | $(function() {
100 | var loc = new locationInfo();
101 | loc.getCountries();
102 |  $(".countries").on("change", function(ev) {
103 |         var countryId = $(this).val();
104 |         if(countryId != ''){
105 |         loc.getStates(countryId);
106 |         }
107 |         else{
108 |             $(".states option:gt(0)").remove();
109 |         }
110 |     });
111 |  $(".states").on("change", function(ev) {
112 |         var stateId = $(this).val();
113 |         if(stateId != ''){
114 |         loc.getCities(stateId);
115 |         }
116 |         else{
117 |             $(".cities option:gt(0)").remove();
118 |         }
119 |     });
120 | });
121 | 
122 | 
123 | 


--------------------------------------------------------------------------------