i need to count total of states and cities on change of Dropdown?
and display it beside result in view
Controller
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dynamic_dependent extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('dynamic_dependent_model');
}
function index()
{
$data['country'] = $this->dynamic_dependent_model->fetch_country();
$this->load->view('dynamic_dependent', $data);
}
function fetch_state()
{
if($this->input->post('country_id'))
{
echo $this->dynamic_dependent_model->fetch_state($this->input->post('country_id'));
}
}
function fetch_city()
{
if($this->input->post('state_id'))
{
echo $this->dynamic_dependent_model->fetch_city($this->input->post('state_id'));
}
}
}
Modal
<?php
class Dynamic_dependent_model extends CI_Model
{
function fetch_country()
{
$this->db->order_by("country_name", "ASC");
$query = $this->db->get("country");
return $query->result();
}
function fetch_state($country_id)
{
$this->db->where('country_id', $country_id);
$this->db->order_by('state_name', 'ASC');
$query = $this->db->get('state');
$output = '<option value="">Select State</option>';
foreach($query->result() as $row)
{
$output .= '<option value="'.$row->state_id.'">'.$row->state_name.'</option>';
}
return $output;
}
function fetch_city($state_id)
{
$this->db->where('state_id', $state_id);
$this->db->order_by('city_name', 'ASC');
$query = $this->db->get('city');
$output = '<option value="">Select City</option>';
foreach($query->result() as $row)
{
$output .= '<option value="'.$row->city_id.'">'.$row->city_name.'</option>';
}
return $output;
}
}
?>
view Page
<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>
