Cascading Dropdown List in CodeIgniter

Last updated on November 18, 2022

In this post, I will show you a very simple and powerful approach to creating cascading dropdowns in your CodeIgniter application.

Cascading drop-down?

A cascading dropdown list is a series of dependent dropdown list controls in which one dropdown list control depends on the parent or previous dropdown list controls. The items in the dropdown list control are populated based on an item that is selected by the user from another dropdown list control.

Cascading Dropdown Example

This example contains two dropdowns, country and state. Based on the country selected the state dropdown list will get updated with the appropriate options list.

Follow the below steps to generate dependent dropdowns in your CodeIgniter application-

Step 1: Download and install CodeIgniter.
Step 2: Create a database, to configure database settings update config/database.php file.

	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'ci-demo',
	'dbdriver' => 'mysqli',

Step 3: – We gonna use following tables (country_table, city_table) and its data –

CREATE TABLE `country_tbl` (
  `country_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `country_name` varchar(45) NOT NULL DEFAULT '',
  PRIMARY KEY (`country_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

CREATE TABLE  `state_tbl` (
  `sate_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `sate_name` varchar(45) NOT NULL DEFAULT '',
  `country_id` int(10) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`sate_id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

INSERT INTO `country_tbl` (`country_id`, `country_name`) VALUES
(1, 'India'),
(2, 'US'),
(3, 'UK');

INSERT INTO `state_tbl` (`sate_id`, `sate_name`, `country_id`) VALUES
(1, 'Andhra Pradesh', 1),
(2, 'Telangana State', 1),
(3, 'Alabama', 2),
(4, 'Alaska', 2),
(5, 'Scotland', 3),
(6, 'Northern Ireland', 3);

Step 4: Create a custom helper to generate dropdown HTML. Follow the below steps to create a DropDown Helper:

1. create a file called dropdown_helper.php in application/helper/dropdown_helper.php.

2. Then copy and paste the following code.

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
 
 
  function listData($table,$name,$value,$options = []) {
      $items = array();
      $CI =& get_instance();
      if(array_key_exists('where',$options)) {
          $CI->db->where($options['where']);
      }
      $query = $CI->db->select("$name,$value")->from($table)->get();
      if ($query->num_rows() > 0) {
          foreach($query->result() as $data) {
              $items[$data->$name] = $data->$value;
          }
          $query->free_result();
          return $items;
      }
  }
 
/* End of file dropdwon_helper.php */
/* Location: ./application/helper/dropdown_helper.php */

Step 5: Let’s open the welcome controller and update its index method with the below code

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
	public function index()
	{
		$this->load->helper(array('dropdown','form'));
		$this->load->database();
		$dropdownItems = listData('country_tbl','country_id', 'country_name');
		$countryDropdown = form_dropdown('country',$dropdownItems);
		$stateDropdown =   form_dropdown('state',[]);
		$this->load->view('welcome_message', ['countryDropdown' => $countryDropdown, 'stateDropdown' => $stateDropdown]);
	}

	public function getState() {
		$this->load->helper(array('dropdown','form'));
		$this->load->database();
	    $country_id = $this->input->get('country_id');
		$dropdownItems = listData('state_tbl','sate_id', 'sate_name',['where' => ['country_id' => $country_id]]);
		echo $stateDropdown =   form_dropdown('state',$dropdownItems);
		
	}
}

Step 6: Now update welcome_message.php view file with the below content

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('select[name=country]').on('change',function(){
		$.ajax({
            url: 'index.php/welcome/getState?country_id='+$(this).val(),
            type: "GET",
         }).done(function(data) {
            $('select[name=state]').html(data);
         }).fail(function() {
			
         }).always(function() {
         
        });
	});
});
</script>
<div id="container">
    <?php echo $countryDropdown; ?> 
    <?php echo $stateDropdown; ?>
</div>

Useful links

codeigniter dropdown list from database
CodeIgniter form dropdown Validation?
Html Select Tag