Фильтрация выпадающих меню с помощью 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 и никогда не делал ничего подобного раньше.

Любая помощь ценится!

Билли

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"}]

Итак, он успешно восстанавливает правильные данные. единственная проблема - это добавление пустых значений / текста в выпадающий список. и каждый раз, когда я меняю город, добавляются данные, так что, наверное, мне сначала придется очистить выпадающий список?

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 будет

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, а значение и текст - его свойства.

когда вы генерируете json через php, вы должны уважать то, что используете в 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 -

Допустим, у вас есть 'страна' в качестве идентификатора для выбора страны -

, тогда при изменении страны вы можете привести ее конкретнуюследующие города -

$(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