Dynamic Dependent Dropdown in CodeIgniter 4 using Ajax

In this article, we are going on how to create a dynamic dependent dropdown in CodeIgniter 4 using jQuery and Ajax(Dynamic Dependent Dropdown in CodeIgniter 4 using jQuery and Ajax). so here we will give information about the ajax country state city dropdown.

The dynamic dependent dropdown is commonly used in country-state-city and category-subcategory selection. Loading dynamic data into selection boxes without refreshing the page makes the web application easy to use.

Overview

Step 1: Install Codeigniter 4

Step 2: Setting Database Configuration

Step 3: Create Table in Database

Step 4: Create Controllers

Step 5: Create View Files

Step 6: Run Our Application

Install Codeigniter 4

If you want to download or install CodeIgniter 4 then you can below Url.
How To Install Codeigniter 4 Using Manual, Composer, Git

Setting Database Configuration

After complete installation of CodeIgniter 4. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.

database.default.hostname = localhost
database.default.database = ci4_dropdown
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

Create Table in Database

Now, We need to create a new table in the database. so here we will create and insert some data into the database. so you can see below the MySQL script.

CREATE TABLE `countries` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


INSERT INTO `countries` (`id`, `name`, `created_at`, `updated_at`) VALUES
(1, 'India', '2021-01-31 18:30:00', NULL),
(2, 'USA', '2021-01-31 18:30:00', NULL);


CREATE TABLE `states` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `country_id` int(11) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;



INSERT INTO `states` (`id`, `name`, `country_id`, `created_at`, `updated_at`) VALUES
(1, 'Gujarat', 1, '2021-01-31 18:30:00', NULL),
(2, 'California', 2, '2021-01-31 18:30:00', NULL),
(3, 'Florida', 2, '2021-01-31 18:30:00', NULL),
(4, 'Bihar', 1, '2021-01-31 18:30:00', NULL);


CREATE TABLE `cities` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `state_id` int(11) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


INSERT INTO `cities` (`id`, `name`, `state_id`, `created_at`, `updated_at`) VALUES
(1, 'Patna', 4, '2021-01-31 18:30:00', NULL),
(2, 'Surat', 1, '2021-01-31 18:30:00', NULL),
(3, 'Rajkot', 1, '2021-01-31 18:30:00', NULL),
(4, 'Ahmedabad', 1, '2021-01-31 18:30:00', NULL),
(5, 'Simi Valley', 2, '2021-01-31 18:30:00', NULL),
(6, 'Vacaville', 2, '2021-01-31 18:30:00', NULL),
(7, 'Palm Beach', 3, '2021-01-31 18:30:00', NULL),
(8, 'Palm Bay', 3, '2021-01-31 18:30:00', NULL);

Create Controllers

we need to create the dropdown controllers. so you can see the below example.

app/Controllers/Dropdown.php

<?php namespace App\Controllers;

class Dropdown extends BaseController
{
	public function index()
	{
		$data = [];
		$db = \Config\Database::connect();
		$countries = $db->table('countries')->get()->getResult();
		$data['countries']=$countries;
		return view('dropdown',$data);
	}

	public function getState($id = null)
	{
		$db = \Config\Database::connect();
		$states = $db->table('states')->where('country_id',$id)->get()->getResult();
		echo json_encode($states);
	}

	public function getCity($id = null)
	{
		$db = \Config\Database::connect();
		$cities = $db->table('cities')->where('state_id',$id)->get()->getResult();
		echo json_encode($cities);
	}

}

Create view Files

here in this step, we need to create a new dropdown.php file into the views directory. for that, you can see the below example.

app/views/dropdown.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic Dependent Dropdown in CodeIgniter 4 using jQuery and Ajax - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dynamic Dependent Dropdown in CodeIgniter 4 using jQuery and Ajax</h2>
    <div class="form-group">
      <label for="country">Country:</label>
	  <select id="country" name="category_id" class="form-control">
        <option value="" selected disabled>Select Country</option>
         <?php foreach($countries as $country){ ?>
         <option value="<?php echo $country->id; ?>"><?php echo $country->name; ?></option>
         <?php } ?>
      </select>
    </div>
    <div class="form-group">
      <label for="state">State:</label>
      <select name="state" id="state" class="form-control"></select>
    </div>
	<div class="form-group">
      <label for="city">City:</label>
      <select name="city" id="city" class="form-control"></select>
    </div>
</div>
<script type=text/javascript>
  $('#country').change(function(){
  var countryID = $(this).val();  
  if(countryID){
    $.ajax({
      type:"GET",
      url:"dropdown/getState/"+countryID,
      success:function(res){       
			if(res){
				$("#state").empty();
				$("#state").append('<option>Select State</option>');
				var dataObj = jQuery.parseJSON(res);
				if(dataObj){
					$(dataObj).each(function(){
						$("#state").append('<option value="'+this.id+'">'+this.name+'</option>');
					});
				}else{
					$("#state").empty();
				}
			}else{
				$("#state").empty();
			}
        }
    });
  }else{
    $("#state").empty();
    $("#city").empty();
  }   
  });
  $('#state').on('change',function(){
  var stateID = $(this).val();  
  if(stateID){
    $.ajax({
      type:"GET",
	  url:"dropdown/getCity/"+stateID,
      success:function(res){        
			if(res){
				$("#city").empty();
				$("#city").append('<option>Select City</option>');
				var dataObj = jQuery.parseJSON(res);
				if(dataObj){
					$(dataObj).each(function(){
						$("#city").append('<option value="'+this.id+'">'+this.name+'</option>');
					});
				}else{
					$("#city").empty();
				}
			}else{
				$("#city").empty();
			}
      }
    });
  }else{
    $("#city").empty();
  }
  });
</script>
</body>
</html>