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

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

.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;
 background-color: aquamarine;
 alignment-adjust: central;
    background-color: lightgrey;
    width: 700px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
<div class="dropdown">
    <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="" background-color="red">  
    <div class="borderdemo">
        <h2><u>Dropdown populate using Codeigniter and javascript</u></h2>
<form class="demo">
    <label for="txtcompanyname">State </label>
    <select id="state" name="State" class="option3"  onchange="selctcity()">
    <option value="0">Select one</option>
foreach($query->result() as $row)
    <option value="<?php echo $row->state_name;?>"><?php echo $row->state_name;?></option>
    <?php }?>
    <label for="txtcityname">City </label>
 <select name="city" id="city" class="option3" >
      <option value="">- Select city  - </option>


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

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


 class Ektree extends CI_Controller
        public $data;
	public function __construct()
	//Core controller constructor
      function demo_dropdown()
      function citydetailswithstate()
	        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>
    function selctcity()
   var state=$('#state').val();
		$.post('<?php echo base_url();?>index.php/ektree/citydetailswithstate/',


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

class Ektreemodel extends CI_Model
         public function get_city_info()
            $query="select distinct city_name from ektree_states where state_name ='$state' ";
            return $city_info;
           public function get_state_info()
                $query="select distinct state_name from ektree_states";
                return $states_info;

Thanks for reading this article.