Dynamic Dropdown with CodeIgniter and Ajax

In this post I will show you a simple way to create a dynamic dropdown in CodeIgniter with some Ajax ofcourse. So, you have a dropdown menu and depending upon the choice made by the user in that one, another dropdown gets triggered with appropriate choice.

So, what will we do is:

1. Create a dropdown menu with a list of table names.
2. As the user selects any one of the table names - we will auto-populate the second dropdown with a year dropdown corresponding to the table from our database. 

You probably didn't understand the above points? No worries, you'll know something at the very end of this post and what it is all about.

Let's look at the table 'road_growth' in the database:

After the database table(s) has been set up, let's make a model 'resource' for getting the 'year' column to setup the next dropdown:

function get_year($table) {
 $this->db->select('year')->from($table);
 $query = $this->db->get();
 return $query->result();
}

The view 'get_year' will contain the original dropwdown list which will trigger the ajax after the change event on the dropdown with the POST method. We will grab our next dropdown from the 'ajax_call' method in the controller 'resources'. If successful the callback function would be run. The dropdown is made from CodeIgniter form helper. To know more about the form helper please refer to the CodeIgniter manual. We have to load the form helper before we can use it.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('#table').change(function(){
   var selTable = $(this).val(); // selected name from dropdown #table
   $.ajax({
    url: "ajax_call",  // or "resources/ajax_call" - url to fetch the next dropdown
    async: false,
    type: "POST",     // post
    data: "table="+selTable,  // variable send
    dataType: "html",    // return type
    success: function(data) {  // callback function
     $('#year').html(data);
    }
   })
  });
 });
</script>

Table: 
<?php
 $options = array(
  '' => 'Select',
  'road_accidents_trends' => 'Road Accidents Trends',
  'road_growth' => 'Road Growth',
  'vehicle_numbers' => 'Vehicle Numbers'
 ); 
 echo form_dropdown('table', $options, '', 'id="table"');
?>
 <div id="year" style="display: inline-block"></div>
 <div id="result"></div>
<?php echo form_close(); ?>

Finally, in the controller 'resources' we will have a function 'ajax_call' which will use function 'get_year' of model 'resource' to retrieve the data and make a dropdown of it using the CodeIgniter form helper. We run the 'ajax_call' function only if the post method is encountered. A function 'year' is also setup to simply load the view 'get_year'.

function year() {
 $this->load->helper('form');
 $this->load->view('get_year');
}

function ajax_call() {
 if ($_POST) {
  $table = $_POST['table'];
  $arrYear = $this->resource->get_year($table);
  foreach ($arrYear as $years) {
   $arrFinal[$years->year] = $years->year;
  }
  echo form_dropdown('year',$arrFinal);
 } 
}

That's it. Navigate to 'resources/year'. The result will look like this:

Cheers !