json réponse du serveur (comment remplir la réponse du serveur dans selectbox)

Question

J'essaye de remplir une boîte de sélection (villes liées à un état) en utilisant la méthode $ .ajax de jquery.

j'ai écrit ce qui suit dans mon script 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')} 
    }); 
    }); 

et dans le fichier 'ajax.php' (fichier où la requête est envoyée pour obtenir les villes realted) Je l'ai fait

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

Maintenant, la réponse vient en tant qu'objet XMLHTTPResponse. Comment remplir la réponse dans les villes selectbox.

S'il vous plaît aider, je suis vraiment coincé ici.

Merci

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

Vous devez écrire un gestionnaire success qui sera appelée avec les données transmises (completed est appelée, même en cas d'erreur). Les données sont passées en premier argument. Nous avons d'abord empty() sélectionner et l'affecter à $cmbCity pour des raisons de performances. Ensuite, nous parcourons data en utilisant $.each (itération croisée jQuery) qui lie chacun des éléments à this. En utilisant cela, nous créons de nouvelles options dans la sélection #cmbCity.

Le code ci-dessus suppose que la réponse est dans le format suivant:

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

En outre, notez que data (dans l'appel .ajax $ ci-dessus) est en format clé-valeur - jQuery sérialise automatiquement .