Codeigniter Tutorials

Home » Codeigniter »

Dynamic dependent Dropdown using jquery ajax.

View File

<html>
<head>
<title>Codeigniter Dynamic Dependent Select Box using Ajax</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.box
{
width:100%;
max-width: 650px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container box">
<br />
<br />
<h3 align="center">Codeigniter Dynamic Dependent Select Box using Ajax</h3>
<br />
<div class="form-group">
<select name="country" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row->country_id.'">'.$row->country_name.'</option>';
}
?>
</select>
</div>
<br />
<div class="form-group">
<select name="state" id="state" class="form-control input-lg">
<option value="">Select State</option>
</select>
</div>
<br />
<div class="form-group">
<select name="city" id="city" class="form-control input-lg">
<option value="">Select City</option>
</select>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#country').change(function(){
var country_id = $('#country').val();
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>dynamic_dependent/fetch_state",
method:"POST",
data:{country_id:country_id},
success:function(data)
{
$('#state').html(data);
$('#city').html('<option value="">Select City</option>');
}
});
}
else
{
$('#state').html('<option value="">Select State</option>');
$('#city').html('<option value="">Select City</option>');
}
});

$('#state').change(function(){
var state_id = $('#state').val();
if(state_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>dynamic_dependent/fetch_city",
method:"POST",
data:{state_id:state_id},
success:function(data)
{
$('#city').html(data);
}
});
}
else
{
$('#city').html('<option value="">Select City</option>');
}
});

});
</script>

Controller

File Name :

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

class Dynamic_dependent extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('Auth_model');
}

function index()
{
$data['country'] = $this->Auth_model->fetch_country();
$this->load->view('dynamic_dependent', $data);
}

function fetch_state()
{
if($this->input->post('country_id'))
{
echo $this->Auth_model->fetch_state($this->input->post('country_id'));
}
}

function fetch_city()
{
if($this->input->post('state_id'))
{
echo $this->Auth_model->fetch_city($this->input->post('state_id'));
}
}

}

Model

File Name :- Auth_model.php

Table

CREATE TABLE `country` (
`country_id` int(11) NOT NULL,
`country_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'USA'),
(2, 'Canada'),
(3, 'Australia'),
(4, 'India');

CREATE TABLE `state` (
`state_id` int(11) NOT NULL,
`country_id` int(11) NOT NULL,
`state_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'New York'),
(2, 1, 'Alabama'),
(3, 1, 'California'),
(4, 2, 'Ontario'),
(5, 2, 'British Columbia'),
(6, 3, 'New South Wales'),
(7, 3, 'Queensland'),
(8, 4, 'Karnataka'),
(9, 4, 'Telangana');

CREATE TABLE `city` (
`city_id` int(11) NOT NULL,
`state_id` int(11) NOT NULL,
`city_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 1, 'New York city'),
(2, 1, 'Buffalo'),
(3, 1, 'Albany'),
(4, 2, 'Birmingham'),
(5, 2, 'Montgomery'),
(6, 2, 'Huntsville'),
(7, 3, 'Los Angeles'),
(8, 3, 'San Francisco'),
(9, 3, 'San Diego'),
(10, 4, 'Toronto'),
(11, 4, 'Ottawa'),
(12, 5, 'Vancouver'),
(13, 5, 'Victoria'),
(14, 6, 'Sydney'),
(15, 6, 'Newcastle'),
(16, 7, 'City of Brisbane'),
(17, 7, 'Gold Coast'),
(18, 8, 'Bangalore'),
(19, 8, 'Mangalore'),
(20, 9, 'Hydrabad'),
(21, 9, 'Warangal');

Example 2 : Controller

public function index()
{
$this->load->model('model');
$result['list']=$this->model->getCountry();
$this->load->view('top');
$this->load->view('index',$result);
$this->load->view('footer');
}

public function loadData()
{
$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];
$this->load->model('model');
$result=$this->model->getData($loadType,$loadId);
$HTML="";

if($result->num_rows() > 0){
foreach($result->result() as $list){
$HTML.="<option value='".$list->id."'>".$list->name."</option>";
}
}
echo $HTML;
}

Model

javascript code

table

CREATE TABLE IF NOT EXISTS `country` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(500) NOT NULL
)

CREATE TABLE IF NOT EXISTS `state` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_id` int(11) NOT NULL,
`state_name` varchar(500) NOT NULL
)

CREATE TABLE IF NOT EXISTS `city` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`state_id` int(11) NOT NULL,
`city_name` varchar(500) NOT NULL
)

Example 2:-

CREATE TABLE `state` (
`id` int(11) NOT NULL,
`name` varchar(155) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

City Table :-

CREATE TABLE `cities` (
`id` int(11) NOT NULL,
`state_id` int(12) NOT NULL,
`name` varchar(155) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Controller :-

public function index() {
$states = $this->db->get("state")->result();
$this->load->view('myform', array('states' => $states ));
}

public function myformAjax($id) {
$result = $this->db->where("state_id",$id)->get("cities")->result();
echo json_encode($result);
}

View :- myform.php

<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Dynamic Dependent Dropdown Example </title>
<script src="http://itechxpert.in/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://itechxpert.in/plugin/bootstrap-3.min.css">
</head>

<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select State and get bellow Related City</div>
<div class="panel-body">

<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control" style="width:350px">
<option value="">--- Select State ---</option>
<?php
foreach ($states as $key => $value) {
echo "<option value='".$value->id."'>".$value->name."</option>";
}
?>
</select>
</div>

<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>

</div>
</div>
</div>

<script type="text/javascript">

$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/myform/ajax/'+stateID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
});
</script>

</body>
</html>

Example

Example 3 :-

<?php
//Table structure for table `countries`

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

ALTER TABLE `countries`
ADD PRIMARY KEY (`id`);

ALTER TABLE `countries`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

//Table structure for table `states`

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=utf8mb4;

ALTER TABLE `states`
ADD PRIMARY KEY (`id`);

ALTER TABLE `states`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

//Table structure for table `cities`
CREATE TABLE `cities` (
`id` int(11) NOT NULL,
`name` varchar(30) NOT NULL,
`state_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `cities`
ADD PRIMARY KEY (`id`);

ALTER TABLE `cities`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

?>

Model

<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/

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

class Site extends CI_Model {
private $_countryID;
private $_stateID;

// set country id
public function setCountryID($countryID) {
return $this->_countryID = $countryID;
}
// set state id
public function setStateID($stateID) {
return $this->_stateID = $stateID;
}

public function getAllCountries() {
$this->db->select(array('c.id as country_id', 'c.slug', 'c.sortname', 'c.name as country_name'));
$this->db->from('countries as c');
$query = $this->db->get();
return $query->result_array();
}

// get state method
public function getStates() {
$this->db->select(array('s.id as state_id', 's.country_id', 's.name as state_name'));
$this->db->from('states as s');
$this->db->where('s.country_id', $this->_countryID);
$query = $this->db->get();
return $query->result_array();
}

// get city method
public function getCities() {
$this->db->select(array('i.id as city_id', 'i.name as city_name', 'i.state_id'));
$this->db->from('cities as i');
$this->db->where('i.state_id', $this->_stateID);
$query = $this->db->get();
return $query->result_array();
}

}
?>

Controller

<?php

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

class Location extends CI_Controller {

public function __construct() {
parent::__construct();
$this->load->model('Site', 'location');
}

// get state names
public function index() {
$data['page'] = 'country-list';
$data['title'] = 'country List | TechArise';
$data['geCountries'] = $this->location->getAllCountries();
$this->load->view('location/index', $data);
}

// get state names
public function getstates() {
$json = array();
$this->location->setCountryID($this->input->post('countryID'));
$json = $this->location->getStates();
header('Content-Type: application/json');
echo json_encode($json);
}

// get city names
function getcities() {
$json = array();
$this->location->setStateID($this->input->post('stateID'));
$json = $this->location->getCities();
header('Content-Type: application/json');
echo json_encode($json);
}

}
?>

view

<?php
$this->load->view('templates/header');
?>
<div class="row">
<div class="col-lg-12">
<h2>Codeigniter Dependent country state city dropdown using jQuery Ajax with MySQL</h2>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<a href="#" class="pull-right btn btn-info btn-xs" style="margin: 2px;"><i class="fa fa-mail-reply"></i> Back To Tutorial</a>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<span id="success-msg"></span>
</div>
</div>
<form class="dynamic-dependent-frm" id="dynamic-dependent-frm">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<select title="Select Country" name="regcountry" class="form-control" id="country-name">
<option value="">Select Country</option>
<?php
foreach ($geCountries as $key => $element) {
echo '<option value="'.$element['country_id'].'">'.$element['country_name'].'</option>';
}
?>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<select title="Select State" name="state_name" class="form-control" id="state-name">
<option value="">Select State</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<select title="Select City" name="city_name" class="form-control" id="city-name">
<option value="">Select City</option>
</select>
</div>
</div>
</div>
</form>
<?php
$this->load->view('templates/footer');
?>

js

// get state
jQuery(document).on('change', 'select#country-name', function (e) {
e.preventDefault();
var countryID = jQuery(this).val();
getStatesList(countryID);
});

// get city
jQuery(document).on('change', 'select#state-name', function (e) {
e.preventDefault();
var stateID = jQuery(this).val();
getCityList(stateID);

});

// function get All States
function getStatesList(countryID) {
$.ajax({
url: baseurl + "location/getstates",
type: 'post',
data: {countryID: countryID},
dataType: 'json',
beforeSend: function () {
jQuery('select#state-name').find("option:eq(0)").html("Please wait..");
},
complete: function () {
// code
},
success: function (json) {
var options = '';
options +='<option value="">Select State</option>';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].state_id + '">' + json[i].state_name + '</option>';
}
jQuery("select#state-name").html(options);

},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}

// function get All Cities
function getCityList(stateID) {
$.ajax({
url: baseurl + "location/getcities",
type: 'post',
data: {stateID: stateID},
dataType: 'json',
beforeSend: function () {
jQuery('select#city-name').find("option:eq(0)").html("Please wait..");
},
complete: function () {
// code
},
success: function (json) {
var options = '';
options +='<option value="">Select City</option>';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].city_id + '">' + json[i].city_name + '</option>';
}
jQuery("select#city-name").html(options);

},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}

Itechtuto

Codeigniter Tutorials

Dynamic dependent Dropdown using jquery ajax.

View File

Controller

File Name :

Model

File Name :- Auth_model.php

Table

Example 2 : Controller

Model

javascript code

table

Example 2:-

City Table :-

Controller :-

View :- myform.php

Example

Example 3 :-

Model

Controller

view

js

Connect Us Socially:

Quick Links