JSON ответ от сервера (как заполнить ответ от сервера в selectbox)

Question

Я пытаюсь заполнить поле выбора (города, связанные с государством), используя метод $ .ajax jquery.

Я написал следующее в своем php-скрипте

    $('#cmbState').change(function(){
  $('#cmbCity').children().remove();
  $.ajax({
   type: "POST",
   url: "../include/ajax.php",
   data: "option=getCitiesList&stateid="+$(this).val()+"",
   dataType: "json",
   complete: function(response){
     'what should I write in here ..?'
     },
   beforeSend: function(){$('#cmbCity').addClass('show_loading_in_center')},
   success: function(){$('#cmbCity').removeClass('show_loading_in_center')}
     });
    });

и в файле 'ajax.php' (файл, куда отправляется запрос для получения реальных городов) я сделал

$i=0;
foreach($cities as $city)
 {
  $response[$i]['id'] = $city['pk_cityid'];
  $response[$i]['name'] = $city['name'];
  $i++;
 }
 echo json_encode($response);

Теперь ответ приходит как объект XMLHTTPResponse. Как мне заполнить ответ в города selectbox .?

Пожалуйста, помогите, я действительно застрял здесь.

Спасибо

Answer 1

$('#cmbState').change(function () {
    $.ajax({
        type: "POST",
        url: "../include/ajax.php",
        data: {option: "getCitiesList", stateid: $(this).val()},
        dataType: "json",

        success: function (data) {
            var $cmbCity = $('#cmbCity').empty();
            $.each(data, function () {
                 $cmbCity.append('<option value="' + this.id + '">' + this.name + '</option>')
            });
        },

        beforeSend: function(){ $('#cmbCity').addClass('show_loading_in_center') },
        complete: function(){ $('#cmbCity').removeClass('show_loading_in_center') }
    });
});

Вам нужно написать обработчик success, который будет вызываться с переданными данными (completed вызывается даже при ошибке). Данные передаются в качестве первого аргумента. Сначала empty() выберите и присвойте ему $cmbCity по соображениям производительности. Затем мы перебираем data, используя $.each (кросс-браузерная итерация jQuery), которая связывает каждый из элементов с this. Используя это, мы создаем новые опции в #cmbCity select.

Приведенный выше код предполагает, что ответ имеет следующий формат:

[{"id": 1, "name": "London"}, 
 {"id": 2, "name": "Paris"},
 {"id": 3, "name": "New York"}]

Также обратите внимание, что data (в приведенном выше вызове $ .ajax) имеет формат значения ключа - jQuery автоматически его сериализует.