Repopulate Autoload Dropdown value With Ajax/Jquery

I have spent 2 days on this and I am reaching nowhere. I am a new learner and as encouraged by forum members in one of my other post I am using this forum to get hand on CI.

I am new to php and CI. I have this strange problem here. I am able to repopulate dropdown field value upon error on the first dropdown field only because the values for first field are being pulled from "view.php". I also posted this question on stackoverflow but no response Link Here



I have model:

Code:

function getCountry(){
   $this->db->select('v_country_id,v_country_name');
   $this->db->from('vbc_country');
   $this->db->order_by('v_country_name', 'asc');
   $query=$this->db->get();
   return $query;
}
function getData($loadType,$loadId){
   if($loadType=="state") {
       $fieldList='id,v_state_name as name';
       $table='vbc_state';
       $fieldName='country_id';
       $orderByField='v_state_name';                      
   } else if ($loadType == "region") {
       $fieldList='id,v_state_region_name as name';
       $table='vbc_state_region';
       $fieldName='state_id';
       $orderByField='v_state_region_name';
   } else {
       $fieldList='id,v_city_name as name';
       $table='vbc_city';
       $fieldName='state_region_id';
       $orderByField='v_city_name';
   }
   $this->db->select($fieldList);
   $this->db->from($table);
   $this->db->where($fieldName, $loadId);
   $this->db->order_by($orderByField, 'asc');
   $query=$this->db->get();
   return $query;
}

And a controller dashboard.php

Code:

public function loadData()
{
   $loadType=$_POST['loadType'];
   $loadId=$_POST['loadId'];

   $this->load->model('admin/model_users');
   $result=$this->model_users->getData($loadType,$loadId);
   $HTML="";

   if($result->num_rows() > 0){
       foreach($result->result() as $list){
           $HTML.="<option value='".$list->id."'>".$list->name."</option>";
       }
   }
   echo $HTML;
}

And View:

Code:

<?php if($list->num_rows() > 0){ ?>

<select class="full-width" name="v_item_country" onchange="selectState(this.options[this.selectedIndex].value)">
<option value="0">Country</option>
   <?php foreach($list->result() as $listElement): ?>
       <option value="<?= $listElement->v_country_id?>" <?php if($this->session->flashdata('v_item_country') === $listElement->v_country_id) echo('selected')?>><?= $listElement->v_country_name?></option>
   <?php endforeach; ?>
</select>

<select class="full-width" name="v_item_state" id="state_dropdown" onchange="selectRegion(this.options[this.selectedIndex].value)">
   <option value="0">State</option>
</select>

<select class="full-width" name="v_item_city" id="city_dropdown">
   <option value="0">City</option>
</select>

<?php }else{ echo 'No Country Name Found'; } ?>

And I am totaly lost about ajax.jquery.

PLEASE HELP!