Posez votre question Signaler

AJAX liste déroulante [Résolu]

Azraka 124Messages postés 11 juin 2008Date d'inscription - Dernière réponse le 1 avril 2009 à 22:56
Bonjour,
J'essaie actuellement de faire la chose suivante : j'ai un input dans lequel le visiteur doit taper son code postal et une liste déroulante dans laquelle apparaissent les villes qui correspondent à ce code postal.
Je voudrais qu'à chaque chiffre tapé la liste déroulante s'adapte.
Les villes et les codes postal correspondant sont stockés dans une bdd mysql. Je pense qu'il me faudrait utiliser AJAX pour faire ça mais comment ?
Merci d'avance.
Lire la suite 

AJAX liste déroulante »

9 réponses
Réponse
+0
moins plus
Tu ne voudrais pas plutot faire selectionné le code postale oci ???

Azraka- 13 févr. 2009 à 09:58
J'aurais préféré mais le boss insiste pour faire un truc comme ça, il trouve "plus agréable" (pas à programmer en tous cas)...
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour,

Tu dois utiliser l'évènement "keydown" sur ton input pour appeler ta fonction javascript.

<input type="text" onkeydown="maj_a_jour_ville();"/>


Cette fonction va utiliser de l'AJAX qui se chargera de mettre à jour ton SELECT

Ensuite inspire toi cette page : http://www.crea-web.fr/ajax/actualiser_liste_deroulante.html
Azraka- 13 févr. 2009 à 10:01
C'est ce que je faisais en fait (sur onkeyup mais bon on s'en fout) mais c'est au niveau de l'AJAX que je galérais.

Finalement je me suis énervé et dégouté de l'AJAX, donc je vais faire ça d'une autre manière qui devrait donner le même résultat.
Je mettrais mon source dès que j'aurais réussi.
Ajouter un commentaire
Réponse
+0
moins plus
Ok si tu veux.. Sinon si tu veux g un "ptit" code pour lié deux liste déroulante.... En fonction du code postale les ville s'affiche ;)

Azraka- 13 févr. 2009 à 11:20
C'est gentil mais j'ai quasiment terminé : ça marche très bien sous Firefox mais ça buggue sous IE (normal ^^). Voilà mon code si ça peut aider quelqu'un.
function remplir_liste(nbville)
{
  var _list = document.getElementById("villes");
	for( var i=0; i<=nbville; i++)   //on efface tous les éléments de la liste déroulante
	{
		document.getElementById("villes").options[document.getElementById("villes").length-1] = null;
	}
		
       for ( var i=0; i<=nbville; i++)  // puis on regénère la liste
       {
		var valeur=document.getElementById("ville_"+i).value.split('/');
		// si le code postal correspond à celui entré dans l'input "cp" alors on créé l'option
       if((valeur[1].substr(0,document.getElementById('cp').value.length)==document.getElementById('cp').value))
	{
		var _option=document.createElement("option");
					
		 _option.value=valeur[0];
		 _option.innerHTML=valeur[1]+" "+valeur[2];
		 _list.appendChild(_option);
	}
        }
		
	if (document.getElementById("villes").length == 0)  // la liste ne contient aucun résultat
	{
		var _option=document.createElement("option");
					
		_option.value="erreur";
		 _option.innerHTML="Votre code postal n'est pas valide";
		_list.appendChild(_option);
	}
}

Et si jamais quelqu'un peut me dire ce qui ne va pas avec IE ça m'aiderait pas mal. Il me renvoie l'erreur suivante : "Cet objet ne gère pas cette propriété ou cette méthode"... ça aide pas tellement à avancer mais j'ai pu remarqué que si je commente la ligne
document.getElementById("villes").options[document.getElementById("villes").length-1] = null;
il ne me met plus d'erreur. Vous auriez une idée pour régler ça ?

Voilà, je précise juste que les champs nommés "ville_"+i sont des champs hidden contenant les villes et codes postal des villes (séparés par un "/", d'où le split()).

(désolé pour la mise en forme du code, j'ai fait ce que j'ai pu)
Azraka- 13 févr. 2009 à 11:36
Résolu, il fallait au final remplacer
document.getElementById("villes").options[document.getElementById("villes").length-1] = null;

par
document.getElementById("villes").options[nbville-i] = null;
Ajouter un commentaire
Réponse
+0
moins plus
Cool alor !! super !!! ^^

;)
Ajouter un commentaire
Réponse
+0
moins plus
salut 974_Vin's_974,
voila je n'y connais rien en ajax, mais on me demande d'afficher dans un select la ou les villes correspondantes a un cp (affichage en sortant du champ cp).
tout ce que j'ai c'est une db avec les villes et les cp.
aurais tu la gentillesse de me mettre a dispo ton code.
D'avance merci.
Ajouter un commentaire
Ce document intitulé « AJAX liste déroulante » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?