AJAX liste déroulante

Résolu/Fermé
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 - 12 févr. 2009 à 14:19
 christobal - 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.

5 réponses

974_Vin's_974 Messages postés 547 Date d'inscription vendredi 23 janvier 2009 Statut Membre Dernière intervention 19 février 2009 102
13 févr. 2009 à 07:10
Tu ne voudrais pas plutot faire selectionné le code postale oci ???

0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
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)...
0
Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
13 févr. 2009 à 07:28
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 : https://www.creationdesiteinternet.fr
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
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.
0
974_Vin's_974 Messages postés 547 Date d'inscription vendredi 23 janvier 2009 Statut Membre Dernière intervention 19 février 2009 102
13 févr. 2009 à 11:13
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 ;)

0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
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)
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13 > Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014
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;
0
974_Vin's_974 Messages postés 547 Date d'inscription vendredi 23 janvier 2009 Statut Membre Dernière intervention 19 février 2009 102
13 févr. 2009 à 12:04
Cool alor !! super !!! ^^

;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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.
0