Codeigniter select box not working properly using ajax

Question

i am trying to make a select box using ajax but its not working properly, i have two select box one for countries and one for states when i select on country it should fetch state in other select box the problem is that when i select country it shows nothing in state select box but when i check in the console it gives me output like this

<option value="">Select State</option><option value="603">Berat County</option><option value="629">Berat District</option>

My Controler

 function fetch_state()
  {
   if($this->input->post('country_id'))
   {
   $data= $this->Seller_Model->fetch_state($this->input->post('country_id'));
     echo json_encode($data);
   }

My Model

function fetch_state($country_id)
 {
  $this->db->where('country_id', $country_id);
  $this->db->order_by('name', 'ASC');
  $query = $this->db->get('states');
  $output = '<option value="">Select State</option>';
  foreach($query->result() as $row)
  {
   $output .= '<option value="'.$row->id.'">'.$row->name.'</option>';
  
  }
  return $output;
 }

This is my view

 <div class="col-lg-6 col-md-12">
                        <div class="form-group looking">
                                      <select name="ad_country" id="country1"onchange="change1(this.value)"  aria-placeholder="Select Status" class="nice-select form-control wide " required >
                                          <option value="">Select Country</option>
                                          <?php foreach ($get_country as $country) {
                                             ?>
                                              <option value="<?php echo $country->id; ?>"  class="option"> 
                                                <?php echo $country->name; ?>
                                              </option>
                                          <?php } ?>

                                      </select>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 col-md-12">
                        <div class="form-group looking">
                                      <select name="ad_state" id="state1"  aria-placeholder="Select Status" class="nice-select form-control wide " required >
                                         <option value="">Select State</option>
                                          
                                      </select>
                
                        </div>
                    </div>
<script>
function change1(vals)
{
     var country_id = $('#country1').val();
     
  if(country_id != '')
  {
   $.ajax({
    url:"<?php echo base_url(); ?>Seller_Controller/fetch_state",
    method:"POST",
    data:{country_id:country_id},
    dataType: 'json',
    success:function(data)
    {
        $('#state1').find('option').not(':first').remove();
                $('#ad_city1').find('option').not(':first').remove();
                $.each(data,function(index,data){
                    $('#state1').append('<option value="'+data['id']+'">'+data['name']+'</option>');
                });
       
    }
   });
  }
  else
  {
   $('#state1').html('<option value="">Select State</option>');
   $('#ad_city1').html('<option value="">Select City</option>');
  } 
}
</script>

Answer 1

The mistake here is in the model you returning a HTML you should return an Array of your request query so the function json_encode() works properly because it was getting a string so when you for each it in your ajax for sure it was getting an error or something in console.

To debug you can use the developer tools of browser you can see the error in the console menu.