php - Dynamic Dropdown Selections in CodeIgniter with jQuery -

i have 3 html dropdowns. first dropdown static , next 2 dependent on previous dropdown. view looks this:

                   <div class="col-xs-3">                           <label for="cat1"><h4>main category</h4></label>                           <select class="form-control" name="cat1" id="cat1"                            onchange="$('#secondary').load('<?php echo site_url('createplay/getmaincategories'); ?>?cat='+this.value);">                             <?php                             $sql = "select distinct level_one categories";                             $query = $this->db->query($sql);                             foreach ($query->result() $row) {                               echo "<option value='".$row->level_one."'>".$row->level_one."</option>";                             }                              ?>                           </select>                       </div>                       <div class="col-xs-4" id='secondary'>                       </div>                        <div class="col-xs-3" id='sub-secondary'>                       </div> 

the sql in view understand doing. keep in model. onchange calls controller/method , passes html select value it. here getmaincategories:

public function getmaincategories() {     $cat = $this->input->get('cat');     $sql = "select distinct level_two categories level_one='".$cat."'";     echo '<label for="cat2"><h4>secondary category</h4></label>';      $jquery = "$('#sub-secondary').load('".site_url('createplay/getsubsecondary')."?subcat='+this.value);";      echo  '<select class="form-control" name="cat2" id="cat2"              onchange="'.$jquery.'">';      $query = $this->db->query($sql);      foreach ($query->result() $row) {         echo  '<option value="'.$row->level_two.'">'.$row->level_two.'</option>';     }      echo   '</select>'; } 

now first dropdown shows correctly, , when make selection second dropdown appears , works correctly. problem when make selection in second dropdown third dropdown not appear. nothing happens, no error messages, nothing. sure because of way calling jquery php script.

how can fix make cleaner , make 3rd dropdown populate?

the best way is, selected value first dropdown , pass controller (use onchange event in jquery). , in ajax response put new dropdown menu result of controller.

something this:

controller:

$data['second_drop_down_data'] = // result of                                  // selected value first drop down... echo $this->load->view->('second_drop_down', $data, true); 

you can apply same logic third , forth dropdown menu...