why cascading is not working in country and state - codeigniter

Question

enter image description here
enter image description here
why this happen they are view model controller respectively.
My code is not running but it fetch the data from the database.
How I can resolve this problem please help me.
and thanks in advance.
function getcountry()
{
$this->db->select('*');
$query = $this->db->get('et_country');
return $query->result();
}
function getstate($country_id='')
{
$array = array('status' => 'Active','country_id' => $country_id);
$this->db->select('id,name,country_id');
$this->db->where($array);
$query = $this->db->get('et_state');
return $query->result();
}
function getcity($state_id='')
{
$array = array('status' => 'Active','state_id' => $state_id);
$this->db->select('id,name,state_id');
$this->db->where($array);
$query = $this->db->get('et_city');
return $query->result();
}
public function create_subadmin()
{
$this->load->model('Auction_model');
$data['country'] = $this->Auction_model->getcountry();
$this->load->view('admin/Auction/add_Auction',$data);
}
public function ajax_state_list($country_id)
{
$this->load->model('Auction_model');
$data['state'] = $this->Auction_model->getstate($country_id);
$this->load->view('admin/Auction/add_Auction',$data);
}
public function ajax_city_list($state_id)
{
$this->load->model('Auction_model');
$data['city'] = $this->Auction_model->getcity($state_id);
$this->load->view('admin/Auction/add_Auction',$data);
}
<script>
function getstatedetails(id)
{
//alert('this id value :'+id);
$.ajax({
type: "POST",
url: '<?php echo site_url('admin/Auction_controller/ajax_state_list').'/';?>'+id,
data: id='cat_id',
success: function(data){
// alert(data);
$('#old_state').html(data);
},
});
}
</script>
<script>
function getcitydetails(id)
{
$.ajax({
type: "POST",
url: '<?php echo site_url('admin/Auction_controller/ajax_city_list').'/';?>'+id,
data: id='st_id',
success: function(data){
$('#old_city').html(data);
},
});
}
</script>
<div class="form-group">
<label>Country</label><br>
<select name="country_id" class="form-control" id="country_details" onChange="getstatedetails(this.value)">
<option value="<?php echo $rs->name ?>" selected="selected" >Select</option>
<?php
foreach ($country_id as $rs) {
?>
<option value="<?php echo $rs->id; ?>"><?php echo $rs->name ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>State</label><br>
<select name="state_id" class="form-control" id="old_state" onChange="getstatedetails(this.value)">
<option value="<?php echo $rs->name ?>" selected="selected" >Select</option>
<?php
foreach ($state_id as $rs) {
?>
<option value="<?php echo $rs->id; ?>"><?php echo $rs->name ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>City</label><br>
<select name="city_id" class="form-control" id="old_city" onChange="getcitydetails(this.value)">
<option value="" selected="selected" >Select</option>
<?php
foreach ($city_id as $rs) {
?>
<option value="<?php echo $rs->id; ?>"><?php echo $rs->name ?></option>
<?php } ?>
</select>
</div>

Answer 1

Try to change the ajax call like this :
var values = {
'cat_id': id
};
$.ajax({
url: "<?php echo site_url('admin/Auction_controller/ajax_state_list').'/';?>"+id,
type: "post",
data: values,
success: function(data) {
$('#old_state').html(data);
}
});