Suppose you are building a Registration form in which users want to select a city to lives in. For that you need to populate respected state that person lives in, otherwise the city field will be extremely long (and there is more of a chance for user mistake and mystification). To solve this problem we need to create dynamic needy dropdowns. In order to accomplish this using Code Igniter, this is what I did:

Html view form dropdownpopulate.php

<html>
<head>
<title>Dropdown populate using Codeigniter and javascript</title>

<style>
.demo select {
	border: 0 !important;  
	-webkit-appearance: none;  
	-moz-appearance: none; 
	background: #0088cc url(img/demo/select-arrow.png) no-repeat 90% center;
	width: 400px; 
	text-indent: 0.01px; 
	text-overflow: ""; 

	color: #FFF;
	border-radius: 15px;
	padding: 5px;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.demo select.balck {
	background-color: #000;
}
.demo select.option3 {
	border-radius: 10px 0;
}
.dropdown
{
 background-color: aquamarine;
 alignment-adjust: central;
}
.borderdemo{
    background-color: lightgrey;
    width: 700px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
</style>
</head>
<body>
<div class="dropdown">
    <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="https://www.eknowledgetree.com/" background-color="red">  
    eKnowledgeTree</a></h1>  
</div>
<center>
    <div class="borderdemo">
        
        <h2><u>Dropdown populate using Codeigniter and javascript</u></h2>
        <br>
<form class="demo">
   
    <label for="txtcompanyname">State </label>
    <select id="state" name="State" class="option3"  onchange="selctcity()">
    <option value="0">Select one</option>
       <?php 
foreach($query->result() as $row)
{ 
?>
    <option value="<?php echo $row->state_name;?>"><?php echo $row->state_name;?></option>
    <?php }?>
    </select>
     
    <br>
    <br>
    <label for="txtcityname">City </label>
 <select name="city" id="city" class="option3" >
      <option value="">- Select city  - </option>
     
      
    </select>   
     
</form></div>
</center>
</body></html>

Now I will create database table for state and cities dropdown populate.

CREATE TABLE `ektree_states` (
  `state_id` int(11) NOT NULL AUTO_INCREMENT,
  `state_name` varchar(27) DEFAULT NULL,
  `city_name` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`state_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;

This code was put into a code igniter view file called “dropdownpopulate.php”.
Now we add form open and closing form tags, and looks to a controller.
Here in the controller we will create a function to load the view file.
To load the states dropdown, we need to create model function get_state_info() to load the states information to controller file named as “ektree.php”.

<?php

 class Ektree extends CI_Controller
{
    
     
        public $data;
	public function __construct()
	{
	//Core controller constructor
	parent::__construct();
	 $this->load->model('ektreemodel');
	 $this->load->library('form_validation');
	 $this->load->library("pagination");
	 error_reporting(0);
	}
     
     
      function demo_dropdown()
      {
           $data['query']=$this->ektreemodel->get_state_info();
           $this->load->view('demos/dropdownpopulate',$data);
      }
      
      function citydetailswithstate()
	{
	        $state=$this->input->post('state');
                $query=$this->ektreemodel->get_city_info();
	        echo '<option value="">Select City </option>';
                foreach($query->result() as $row)
                { 
                 echo "<option value='".$row->city_name."'>".$row->city_name."</option>";
                }
	}
    
    
    
    
}
?>

Here I used JavaScript on select function to load city dropdown
In script I posted the state value to controller and print the out to html view file.

<script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.min.js"></script>
<script>
    function selctcity()
{
   var state=$('#state').val();
		
		$.post('<?php echo base_url();?>index.php/ektree/citydetailswithstate/',
	{
		state:state
		
		},
		function(data) 
		{
		
		$('#city').html(data);
		});	

}
   
    </script>

Now I will create model functions to get the state and cities details.

<?php
class Ektreemodel extends CI_Model
{
  
         public function get_city_info()
         {
            $state=$this->input->post("state");
            $query="select distinct city_name from ektree_states where state_name ='$state' ";
            $city_info=$this->db->query($query);
            return $city_info;
          }
           public function get_state_info()
           {
                $query="select distinct state_name from ektree_states";
                $states_info=$this->db->query($query);
                return $states_info;
      
           }
    
    
    
}
?>

Thanks for reading this article.
Download