Фильтрация выпадающего меню с ajax и PHP

Question

У меня есть приложение CodeIgniter MVC.

У меня есть модель под названием город, который имеет метод:

<?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. один заваленный contries
2. один пустой и быть заполнены с городами retrived через AJAX

Теперь вам нужно написать что-то вроде Альпеша для извлечения городов выбранной страны; 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 в вашей АЯКС функции успеха вы имеете дело с JSon объектами, Infact вы делаете это:

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

где город - объект json, а его значение и текст - его свойства.

при генерации JSON с помощью PHP вы должны уважать то, что вы используете в JQuery так что ваша модель должна возвращать массив как это:

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

json_encode, что массив и он должен работать. Может быть, вам не нужно обернуть модели вызова в массив, но я не уверен, depens о том, как вы вернуть массив со

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