我在我们的codeigniter框架工作中借助ajax让国家和城市下降。
下面给出了数据库的结构。
国家
country_id,country_name
国家
country_id,state_id,state_name
城市
country_id,state_id,city_id,city_name
用户控件
function country(){
$data['header']='Deal Management';
$data['page'] = 'admin/page/user-view';
$data['Country'] = $this->deal->getCountry();
$this->load->view($this->_admin_container,$data);
}
function get_cities($Country){
$this->load->model('city_model');
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->cities_model->get_cities($dealCountry)));
}
用户视图查看
<?php $cities['#'] = 'Please Select'; ?>
<label for="country">Country: </label><?php echo form_dropdown('country_id', $Country, '#', 'id="country"'); ?><br />
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
交易模块country_modle
function getCountry(){
$this->db->select("*");
$query=$this->db->get("deal_country");
$countries = array();
if($query->result()){
foreach ($query->result() as $country) {
$countries[$country->country_id] = $country->country_name;
}
return $countries;
}else{
return FALSE;
}
}
city_model模块
function get_cities($dealCountry = null){
echo $dealCountry;die;
$this->db->select('city_id, city_name');
if($dealCountry != NULL){
$this->db->where('country_id', $dealCountry);
}
$query = $this->db->get('deal_city');
$cities = array();
if($query->result()){
foreach ($query->result() as $city) {
$cities[$city->id] = $city->city_name;
}
return $cities;
}else{
return FALSE;
}
}
我在头文件中包含了ajax脚本。
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#country').change(function(){ //any select change on the dropdown with id country trigger this code
$("#cities > option").remove(); //first of all clear select items
var country_id = $('#country').val(); // here we are taking country id of the selected one.
$.ajax({
type: "POST",
url: "home/get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id
success: function(cities) //we're calling the response json array 'cities'
{
$.each(cities,function(city_id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
{
var opt = $('<option />'); // here we're creating a new select option with for each city
opt.val(id);
opt.text(city);
$('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
});
}
});
});
});
// ]]>
</script>
使代码无效后。
感谢任何帮助!
谢谢
答案 0 :(得分:0)
创建一个javascript变量
var base_url = "<?=base_url()?>";
在你的javascript代码conecat中
url: base_url+"home/get_cities/"+country_id,
使用firefox和firebug来调试你的ajax代码
答案 1 :(得分:0)
正如我在评论中所说,您可以使用Firebug或Chrome dev tools(网络标签)来确定您的问题:
控制器:
<?php
class ctrl extends ci_controller{
function index(){ //I just used this one to test out if its outputing anything
$names = ['apple','ball','cat','dog'];
echo json_encode($names);
}
function load_view(){
$this->load->view('ctrl_view');
}
}
?>
查看:
<script src="/tester/ci/js/jquery172.js"></script>
<input type="text" list="names" id="name" autocomplete="off"/>
<datalist id="names">
</datalist>
<script>
$.post('ctrl/', function(data){ //you can just call out your controller here
var parsed_data = JSON.parse(data);
//its a good practice to use a document fragment to append new elements to and not append a new element on every iteration of the loop in an existing element in the dom
var fragment = document.createDocumentFragment();
for(var x in parsed_data){
var val = parsed_data[x];
var option = $("<option>").val(val).text(val);
fragment.appendChild(option[0]);
}
$('#names').append(fragment); //append the whole fragment outside the loop
});
</script>
我真的不知道你的实际问题是什么,所以请帮忙,编辑你的问题并粘贴你在firebug上看到的错误。
答案 2 :(得分:0)
function get_cities($Country){
$this->load->model('city_model');
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->cities_model->get_cities($dealCountry)));
}
在此功能中,您输入了错误的变量名称 $ dealCountry 。