過濾下拉菜單中的ajax和PHP

我有一個CodeIgniter MVC應用程序。過濾下拉菜單中的ajax和PHP

我有一個模型叫城市，有一個方法：

<?php 
class Cities_model extends Model{  

function Cities_model(){ 
    parent::Model(); 
} 

function get_cities($id = null){ 
    $this->db->select('id, city_name'); 

    if($id != NULL){ 
     $this->db->where('country_id', $id); 
    } 

    $query = $this->db->get('cities'); 

    $cities = array(); 

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

控制器：

function Post(){ 
    $this->load->helper('form'); 
    $this->load->model('cities_model'); 
    $this->load->model('country_model'); 
    $this->load->model('field_model'); 

    $data['cities'] = $this->cities_model->get_cities();//optional $id parameter 
    $data['countries'] = $this->country_model->get_countries(); 

    $data['fields'] = $this->field_model->get_fields(); //subject field 

    $this->load->view('post_view',$data); 
}

此方法用於填充下拉列表中的內容。我有一個類似的國家模式，也有一個下拉菜單。

您可以看到get_cities方法設置爲接受country_id。如果選擇一個國家，這將用於過濾結果。

我的問題是我需要幫助調用這個方法使用Ajax（最好是jQuery）。我是新來的阿賈克斯，從來沒有做過這樣的事情。

任何幫助最受讚賞！

比利

UPDATE

我已經添加了jQuery庫，並已在我的控制器中創建方法：

function get_cities($country){ 
    header('Content-Type: application/x-json; charset=utf-8'); 
    echo(json_encode(array($this->cities_model->get_cities($country)))); 
}

這是我對我的觀點的javascript：

<script type="text/javascript"> 

    $(document).ready(function(){ 

    $('#country').change(function(){ 
    var country_id = $('#country').val(); // here we are taking country id of the selected one. 
    $.ajax({ 
    type: "POST", 
    url: "<?php echo base_url(); ?>home/get_cities/"+country_id, 
    data: ({country : country_id}), 
    success: function(cities){ 
     $.each(cities,function(i,city) 
     { 
      var opt = $('<option />'); 
      opt.val(city.value); 
      opt.text(city.text); 
      $('#cities').append(opt); 
     }); 
    } 

    }); 

    }); 
    });

這是json的回覆：

[{"2":"Accra"}]

因此，它正在成功回收正確的數據。唯一的問題是它將空白值/文本添加到下拉菜單中。每當我改變城市的數據被添加，所以我想我必須先清除下拉菜單？

來源

2011-01-20 iamjonesy

延長Alpesh的回答是：

你應該有一個控制器的功能，它會返回按國家過濾城市：

/controller/get_cities/<country>

我假設你的控制器的函數會返回一個JSON對象，你可以通過執行獲得它：

function get_cities($country) 
{ 
    header('Content-Type: application/x-json; charset=utf-8'); 
    echo(json_encode(array($this->cities_model->get_cities($country)))); 
}

然後在視圖中，您將有2個選擇框：

一個充滿了與contries
一個空的，與通過AJAX retrived的城市充滿了

現在，你必須寫一些類似Alpesh的東西來回顧所選國家的城市; URL將

url: '/controller/get_cities/'+country_id

而成功的功能將類似於

success: function(cities) 
{ 
    $('#cities').empty(); 
    $.each(cities,function(i,city) 
    { 
     var opt = $('<option />'); 
     opt.val(city.value); 
     opt.text(city.text); 
     $('#cities').append(opt); 
    }); 
}

UPDATE 在你的Ajax成功功能，您正在處理一個JSON對象，事實上，你這樣做是：

opt.val(city.value); 
opt.text(city.text);

城市是一個json對象，值和文本是它的屬性。

當你產生通過PHP你要尊重你的jQuery使用什麼使你的模型應該返回數組像這樣JSON：

array 
(
    array("value"=>"2","text"=>"Accra"), 
    array("value"=>"3","text"=>"Kumasi"), 
    .... 
);

的json_encode數組，它應該工作。也許你並不需要包裝模型調用到一個數組，但我不是你如何返回數組

echo(json_encode(array($this->cities_model->get_cities($country))));

或

echo(json_encode($this->cities_model->get_cities($country)));

來源

2011-01-20 19:20:14 Dalen

感謝您的回覆確認實際上還要考慮。我不確定我是否做得對。我用我的新代碼 – iamjonesy 2011-01-21 12:35:31

您可以通過jQuery的做這種方式 -

可以說你有「國家」作爲選擇一個ID爲國家 -

然後在國家的變化，你可以把它的具體城市如下 -

$(document).ready(function(){ 

    $('#country').change(function(){ 
    var country_id = $('#country').val(); // here we are taking country id of the selected one. 
    $.ajax({ 
    type: "POST", 
    url: "the url you want to call", 
    data: ({id : country_id}), 
    success: function(cities){ 
    //populate the options of your cities dropdown here. 
    } 
    }); 

    });

}）;

，你可以在這裏參考詳細的文檔 -

2011-01-20 18:19:08 Alpesh

過濾下拉菜單中的ajax和PHP

回答

相關問題