I want to make a dynamic dropdown select box with codeigniter and im newer in this platform.
I followed this tutorial: https://www.youtube.com/watch?v=bxA6M9LYrPk
I paste my code here and I shall be very thankful to you please help...
Dynamic_dependent.php(Controller)
<?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');
}
public function index()
{
$data['country'] = $this->dynamic_dependent_model->fetch_country();
$this->load->view('dynamic_dependent', $data);
}
public function fetch_state()
{
if ($this->input->post('country_id')) {
echo $this->dynamic_dependent_model->fetch_state($this->input->post('country_id'));
}
}
public function fetch_city()
{
if ($this->input->post('state_id')) {
echo $this->dynamic_dependent_model->fetch_city($this->input->post('state_id'));
}
}
}
Dynamic_dependent_model.php(Model)
<?php
class Dynamic_dependent_model extends CI_Model
{
public function fetch_country()
{
$this->db->order_by("country_name", "ASC");
$query = $this->db->get("country");
return $query->result();
}
public 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;
}
public 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;
}
}
?>
dynamic_dependent.php(View)
<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>
