Dynamic dependent select box in codeIgniter

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 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>