选择未填充的列表(jQuery Ajax)
选择未填充的列表(jQuery Ajax)
提问于 2012-06-14 19:53:35
更新：通过禁用Ajax事件探查器(它干扰了Ajax的成功响应)来实现这一功能。我认为它为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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2012-06-15 11:03:28
好了，各位，我通过禁用CodeIgniter剖析器成功地实现了这一目标。Codeigniter分析器(否则是一个方便的工具)用Ajax破坏任何页面上的javascript。如果不能使用分析器，请使用使CodeIgniter的Profiler AJAX兼容上提供的解决方案
Stack Overflow用户
发布于 2012-06-15 09:56:55
将ajax成功回调更改为：
success: function (cities) {
for (var id in cities) {
var opt = $('<option />');
opt.val(id);
opt.text(cities[id]);
$('#cities').append(opt);
}
}因为ajax结果不是数组而是json对象。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11040396
复制相关文章
相似问题
腾讯云开发者
