选择列表未填充（jQuery Ajax）答案

【问题标题】：Select list not getting populated (jQuery Ajax)选择列表未填充（jQuery Ajax）
【发布时间】：2012-06-15 19:03:28
【问题描述】：

更新：通过禁用干扰 Ajax 成功响应的 CodeIgniter Profiler 来实现此功能。我认为它在 JSON 响应中添加了一个 div。

我正在尝试使用 mysql 数据库中的数据填充依赖选择框。问题是，尽管响应 Ajax 请求以正确的格式获取数据，但依赖选择框没有得到填充。

请帮助我，因为我完全不知道这里发生了什么。下面是我的 JavaScript 代码。

<script type="text/javascript">

$(document).ready(function(){
    $('#country').change(function(){ 
        $("#cities > option").remove(); 

        var form_data = {
            country: $('#country').val(),
            csrf_token_name: $.cookie("csrf_cookie_name")
        };

        $.ajax({
            type: "POST",
            url: "http://localhost/outlets/get_cities", 
            data: form_data,
            dataType : "JSON",
            success: function(cities)
            {
               $.each(cities,function(id,name)
                {
                    var opt = $('<option />'); 
                    opt.val(id);
                    opt.text(name);
                    $('#cities').append(opt); 
                });
            }

        });

    });
});
</script>

这里是 HTML。我正在使用 Codeigniter。

<form id="form">
<?php $cities['#'] = 'Please Select'; ?>
<label for="country">Country: </label><?php echo form_dropdown('country_id', $countries, '#', 'id="country"'); ?><br />
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
</form>

这里是控制器：

function get_cities(){
    $country = $this->input->post('country');
  $this->load->model('city');
  header('Content-Type: application/x-json; charset=utf-8');
  echo (json_encode($this->city->get_cities($country)));
}

&模特：

function get_cities($country = NULL){
  $this->db->select('id, name');

  if($country != NULL){
      $this->db->where('countries_id', $country);
  }
  $query = $this->db->get('cities');

  $cities = array();

  if($query->result()){
      foreach ($query->result() as $city) {
          $cities[$city->id] = $city->name;
      }
  return $cities;
  }else{
      return FALSE;
  }
}

【问题讨论】：

您如何验证响应是否正确？你的数据是什么样的？如果您不向我们展示正在循环的内容，则无法判断您的循环是否正确。
@am 不是我：有效点。我将在问题中添加控制器和模型代码。
请改为添加呈现的响应。这样更容易阅读。您可以将其记录到控制台，然后复制/粘贴它。 console.log(JSON.stringify(cities));
这是我收到的回复：{"1":"Delhi-NCR","2":"Bangalore","4":"Mumbai"}。
如果您在success 回调中执行console.log(typeof cities); 会得到什么？

标签： javascript ajax jquery

【解决方案1】：

将您的 ajax 成功回调更改为：

    success: function (cities) {
        for (var id in cities) {
            var opt = $('<option />');
            opt.val(id);
            opt.text(cities[id]);
            $('#cities').append(opt);
        }
    }

因为你的 ajax 结果不是数组而是 json 对象。

【讨论】：

【解决方案2】：

大家好，我设法通过禁用 CodeIgniter Profiler 来完成这项工作。 Codeigniter 分析器，否则是一个方便的工具，使用 Ajax 破坏任何页面上的 javascript。如果不能没有 profiler，请使用Making CodeIgniter’s Profiler AJAX compatible 上提供的解决方案

【讨论】：