Gestion interdépendante de trois listes de sélection

Bonjour,
J'utilise Jquery 1.4.1 et je suis débutant en jquery.

1. J'ai 3 select (départements, villes, commerces) dont le contenu doit être chainé :
- On choisit un département, le select des villes (et éventuellement celui des commerces) est actualisé.
- On choisit une ville, le select des commerces est actualisé.
- On choisit un commerce, un liste s'affiche.

http://img688.imageshack.us/img688/5530/91597740.png

J'ai pour cela le code suivant :
Dans mon Header :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(function(){ // select départements $("select#departement").change(function(){ $("#liste_villes").load("affvilles.php", {id_dept: $(this).val()}); $("#liste_commerces").load("affcommerces.php", {id_dept: $(this).val()}); }) // select villes $("select#ville").change(function(){ $("#liste_commerces").load("affcommerces.php", {id_ville: $(this).val()}); }) // select commercants $("select#commercant").change(function(){ $("#liste_art").load("affart.php", {id_commerce: $(this).val()}); }) });
Dans la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <p><form id="adform1"> <label for="departement">Département :</label> <div id="liste_depts"> <?php afficherSelectTousDepartements(); ?> </div> <noscript> <input type="submit" name="action" value="Afficher villes" /> </noscript> </form></p> <p><form id="adform2"> <label for="ville">Ville :</label> <div id="liste_villes"> <?php include "affvilles.php"; ?> </div> <noscript> <input type="submit" name="action" value="Afficher commerces" /> </noscript> </form></p> <p><form id="adform3"> <label for="commerce">Commerce :</label> <div id="liste_commerces"> <?php include "affcommerces.php"; ?> </div> <noscript> <input type="submit" name="action" value="Afficher art" /> </noscript> </form></p> <div id="liste_art"></div>
Le système des .change a l'air de bien fonctionner, sauf lors d'imbrications : je sélectionne un département, le select des villes s'actualise sans pb, mais ensuite à la sélection d'une ville, rien ne se passe. Comme si le code chargé dans le DOM par jquery n'était pas pris en compte dans les fonctions.

J'ai essayé de mettre le code jquery dans mes fichiers rechargés, le résultat est là, mais ça fait une boucle...

Y-a-t-il une manière d'actualiser le dom ?

2. Autre petite question, j'aimerais qu'une fois un select actualisé, une bordure rouge apparaisse puis disparaisse pour indiquer à l'utilisateur que l'actualisation a bien été faite. J'ai tenté avec
Code:

1 2 3 4 5 6 $("#liste_villes").animate({ border = "solid red 3px" }, 1500, function() { border = "none" });
mais ma syntaxe devait pas être bonne... une idée ?

Merci,

Bonsoir.

Je découvre, remarques :

jQuery est un "framework" JavaScript et non un langage serveur, veuillez donner le code affiché dans votre navigateur et non le code PHP
un id doit être unique, plusieurs form id="adform1"

Le php était simplement donné à titre informatif, mais soit, je le supprime.

Pour les "adform", je suis entièrement d'accord, c'est le résultat d'un copié collé un peu rapide, sur une version encore en test. C'est corrigé, en tout cas !

Une idée sur mon .load qui ne load pas sinon ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// contenu modifié, nécessite live et jQuery 1.4.2, voir http://api.jquery.com/live/
 
$("#departement").live("change", function(){
	$("#liste_villes").load("affvilles.php", {id_dept: $(this).val()}); 
	$("#liste_commerces").load("affcommerces.php", {id_dept: $(this).val()});
})
 
$("#ville").live("change", function(){
	$("#liste_commerces").load("affcommerces.php", {id_ville: $(this).val()});
})
 
$("#commercant").live("change", function(){
	$("#liste_art").load("affart.php", {id_commerce: $(this).val()}); 
})
 
$("#liste_villes").animate({border:"3px solid red"}, 1500, function(){
	$(this).css({border:"none"});
});

Parfait. Merci à toi, danielhagnoul.