Codeigniter Tutorials

Home » Codeigniter »

Dynamic dependent dropdown list in CodeIgniter using Ajax

City Table:

File Name :

CREATE TABLE `city` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`cityname` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Department Table:

File Name :

CREATE TABLE `department` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`depart_name` varchar(80) NOT NULL,
`city` int(3) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

User Department Table :-

File Name :

CREATE TABLE `user_depart` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`username` varchar(80) NOT NULL,
`name` varchar(80) NOT NULL,
`email` varchar(80) NOT NULL,
`department` int(3) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

User Controller :-

File Name :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class User extends CI_Controller {

public function index(){
// load base_url
$this->load->helper('url');

//load model
$this->load->model('Main_model');

// get cities
$data['cities'] = $this->Main_model->getCity();

// load view
$this->load->view('user_view',$data);
}

public function getCityDepartment(){
// POST data
$postData = $this->input->post();

// load model
$this->load->model('Main_model');

// get data
$data = $this->Main_model->getCityDepartment($postData);
echo json_encode($data);
}

public function getDepartmentUsers(){
// POST data
$postData = $this->input->post();

// load model
$this->load->model('Main_model');

// get data
$data = $this->Main_model->getDepartmentUsers($postData);
echo json_encode($data);
}
}

Model :-

File Name : Main_model.php

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

class Main_model extends CI_Model {

// Get cities
function getCity(){

$response = array();

// Select record
$this->db->select('*');
$q = $this->db->get('city');
$response = $q->result_array();

return $response;
}

// Get City departments
function getCityDepartment($postData){
$response = array();

// Select record
$this->db->select('id,depart_name');
$this->db->where('city', $postData['city']);
$q = $this->db->get('department');
$response = $q->result_array();

return $response;
}

// Get Department user
function getDepartmentUsers($postData){
$response = array();

// Select record
$this->db->select('id,name,email');
$this->db->where('department', $postData['department']);
$q = $this->db->get('user_depart');
$response = $q->result_array();

return $response;
}

}

View :-

File Name :

<!doctype html>
<html>
<body>

<table border='0'>


<tr>
<td>City</td>
<td>
<select id='sel_city'>
<option>-- Select city --</option>
<?php
foreach($cities as $city){
echo "<option value='".$city['id']."'>".$city['cityname']."</option>";
}
?>
</select>
</td>
</tr>


<tr>
<td>Department</td>
<td>
<select id='sel_depart'>
<option>-- Select deparment --</option>
</select>
</td>
</tr>


<tr>
<td>User</td>
<td>
<select id='sel_user'>
<option>-- Select user --</option>
</select>
</td>
</tr>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type='text/javascript'>
// baseURL variable
var baseURL= "<?php echo base_url();?>";

$(document).ready(function(){

// City change
$('#sel_city').change(function(){
var city = $(this).val();

// AJAX request
$.ajax({
url:'<?=base_url()?>index.php/User/getCityDepartment',
method: 'post',
data: {city: city},
dataType: 'json',
success: function(response){

// Remove options
$('#sel_user').find('option').not(':first').remove();
$('#sel_depart').find('option').not(':first').remove();

// Add options
$.each(response,function(index,data){
$('#sel_depart').append('<option value="'+data['id']+'">'+data['depart_name']+'</option>');
});
}
});
});

// Department change
$('#sel_depart').change(function(){
var department = $(this).val();

// AJAX request
$.ajax({
url:'<?=base_url()?>index.php/User/getDepartmentUsers',
method: 'post',
data: {department: department},
dataType: 'json',
success: function(response){

// Remove options
$('#sel_user').find('option').not(':first').remove();

// Add options
$.each(response,function(index,data){
$('#sel_user').append('<option value="'+data['id']+'">'+data['name']+'</option>');
});
}
});
});

});
</script>
</body>
</html>

Itechtuto

Codeigniter Tutorials

Dynamic dependent dropdown list in CodeIgniter using Ajax

File Name :

File Name :

File Name :

File Name :

File Name : Main_model.php

File Name :

Connect Us Socially:

Quick Links