Codeigniter select 使用 ajax 盒子不能正常工作

Question

我正在嘗試使用 ajax 制作一個 select 盒子，但它無法正常工作，我有兩個 select 盒子，一個用於國家，一個用於國家，當我在國家上使用 select 時，它應該在其他 8812742110088 中獲取 state select8 問題在 state select 框中什么都不顯示，但是當我檢查控制台時，它會給我 output 這樣的

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

我的控制器

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

我的 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;
 }

這是我的看法

 <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

這里的錯誤是在 model 你返回一個 HTML 你應該返回你的請求查詢的數組所以 function json_encode() 工作正常因為它正在獲取一個字符串所以當你在你的 ajax 中為每個它確定它得到一個錯誤或者控制台中的東西。

要調試，您可以使用瀏覽器的開發人員工具，您可以在控制台菜單中看到錯誤。