Submitted by : Raj Thakur
Web Tutorials: Bootstrap CodeIgniter CSS HTML JavaScript Jquery
Database Tutorials: Mysql
Posted on : 08-08-2019 01:07:59p

Download Code

Hello, friends thank to chose our website for this tutorial, Here we implementing the dependent select box by using jquery in Codeigniter. The dependent select boxes are work on the dropdown list. The dropdown list is providing data value is must be quince. The dependent select box is working selection, the dependent selection is helping to retrieved value from an option that value is posted to the next select box value change. In many web development some time we need to get dependent value like country state and city dropdown. Each city is identified by his state likewise state is dependent on a country that means we need a sequence data. Another best example is the student category like which branch dependent on classes and studying year. In core PHP we easily implement a dependent select box but in Codeigniter, we think about mode view controller, When in the first select box we selecting a particular option then the jquery is helped to without reloading the page it's changing the next select box by using retrieved data from the database. In the database, we already get the record of countries, states, and cities. When we select the country then post the primary id of country record row to the jquery script, jquery script call next select box with valid data of dependent selected option.

Create a database tables

The following SQL creates a countries, states and cities table in the MySQL database.

CREATE TABLE `countries` (
  `id` int(11) NOT NULL,
  `sortname` varchar(3) NOT NULL,
  `name` varchar(150) NOT NULL,
  `phonecode` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `states` (
  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL,
  `country_id` int(11) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `cities` (
  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL,
  `state_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Database Configuration (Application/config/database.php)

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'dependent_select_box',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Dynamic Dependent Select Boxes View (Application/views/layout/home.php)

<!DOCTYPE html>
<html>
<head>
	<title>Dependent select box</title>
	<link rel="stylesheet" type="text/css" href="<?= base_url("Assets/bootstrap/css/bootstrap.min.css"); ?>">
	  
	 <script src="<?= base_url("Assets/jquery/jquery.min.js"); ?>"></script>
    <script src="<?= base_url("Assets/bootstrap/js/bootstrap.bundle.min.js"); ?>"></script>

</head>
<body>

<div align="center" class="container">

<h3>Dependent Select box using jquery in codeigniter</h3>
	<div class="row">
	<div class="col-md-3"></div>
		<div class="col-md-6">
				<div class="form-group">
				    <label for="exampleFormControlSelect1">Country</label>
				    <select class="form-control country" id="exampleFormControlSelect1">
				      <option selected hidden>Select Country</option>
						<?php foreach ($all_countries as $value) {
							# code...
							?>
						 <option value="<?php echo $value->id; ?>"><?php echo $value->name.'-'.$value->sortname; ?></option>
							<?php
						} 

						?> 
				    </select>
				  </div>

				  <div class="form-group">
				    <label for="exampleFormControlSelect1">State</label>
				    <select class="form-control state" id="exampleFormControlSelect1">
				      <option selected hidden>Select State</option>
				    </select>
				  </div>

				  <div class="form-group">
				    <label for="exampleFormControlSelect1">City</label>
				    <select class="form-control city" id="exampleFormControlSelect1">
					 <option selected hidden>Select City</option>
				    </select>
				  </div>
		</div>
	</div>
</div>
</body>
</html>

JavaScript  code :

<script type="text/javascript">
$(document).ready(function()
{
	$(".country").change(function()
	{
		var id=$(this).val();
		var dataString = 'id='+ id;
	
		$.ajax
		({
			type: "POST",
			url: '<?php echo base_url(); ?>/select_box/get_state',
			data: dataString,
			cache: false,
			success: function(html)
			{
				$(".state").html(html);
			} 
		});
	});
	
	
	$(".state").change(function()
	{
		var id=$(this).val();
		var dataString = 'id='+ id;
	
		$.ajax
		({
			type: "POST",
			url: '<?php echo base_url(); ?>/select_box/get_city',
			data: dataString,
			cache: false,
			success: function(html)
			{
				$(".city").html(html);
			} 
		});
	});
	
});
</script>

Controller code (Application/Controllers/Select_box.php):

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

class Select_box extends CI_Controller {

	public function index()
	{
		 $all_country = $this->data_model->all_countries();
		$this->load->view('layout/home',['all_countries'=>$all_country]);
	}
	public function get_state()
	{
		$id=$this->input->post('id');

	 	$all_states = $this->data_model->all_states($id);

		$this->load->view('layout/get_state',['all_state'=>$all_states]);
	}
	public function get_city()
	{
		$id=$this->input->post('id');

	 	$all_citis = $this->data_model->all_cities($id);
		$this->load->view('layout/get_city',['all_city'=>$all_citis]);
	}
}

Database Model Code(Application/models/data_model.php):

<?php
class data_model extends CI_Model
{	

		public function all_countries()
	{
		$country=$this->db->select()
							->from('countries')
							->get();
				return $country->result();
	}
		public function all_states($id)
	{
		$state=$this->db->select()
							->from('states')
							->where('country_id',$id)
							->get();
				return $state->result();
	}

			public function all_cities($id)
	{
		$city=$this->db->select()
							->from('cities')
							->where('state_id',$id)
							->get();
				return $city->result();
	}

}

?>