使用 ajax 和 PHP 过滤下拉菜单

Question

我有一个 CodeIgniter MVC 应用程序。

我有一个名为 city 的模型，它有一个方法：

<?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）调用此方法。我是 ajax 新手，以前从未做过类似的事情。

非常感谢任何帮助！

比利

更新

我添加了 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"}]

所以它成功地检索了正确的数据。唯一的问题是它在下拉列表中添加了空白值/文本。每次更改城市时都会添加数据，所以我想我必须先清除下拉列表？

Answer 1

扩展 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 个选择框：

1. 充满了国情
2. 一个空的，将被通过 ajax 检索的城市填满

现在，您必须像 Alpesh 那样编写一些东西才能检索所选国家/地区的城市；网址将是

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);
   });
}

更新 在您的 ajax 成功函数中，您正在处理一个 json 对象，实际上您正在这样做：

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

其中 city 是一个 json 对象，value 和 text 是它的属性。

当您通过 php 生成 json 时，您必须尊重您在 jquery 中使用的内容，因此您的模型应该返回一个像这样的数组：

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)));

Answer 2

你可以通过 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.
     }
  });

  });

});

您可以在此处参考详细文档 -

JQuery

Ajax API

Ajax