2 listes liées dynamiquement entre elles, dont le contenu vient d une bdd

Soyez le premier à donner votre avis sur cette source.

Snippet vu 19 514 fois - Téléchargée 37 fois

Contenu du snippet

Ce que j'avais trouvé sur le net ne me plaisait pas trop, ca mélange l'ASP et le javascript.

Je suis parti d un autre code alors il est possible que les noms vous rappelle quelque chose, mais en gros ca sort de ma tête à moi. Je ne dit pas que cela n a jamais été fait, mais voici ma version!

lorsque l'on sélectionne un élément de la premiere liste (categorie d articles par exemple) la seconde liste est instentanément modifiée et affiche les articles de cette categorie, sans qu il n y ait besoin de recharger la page (ce qui me semble le plus important)

Source / Exemple :


<form name="monform" action="<%=URL%>" method=post>
<p>
Catégorie :
<select name="listeA" size="1" onChange="changeliste()">

   <option value="0">---</option>
<%set liste=ConnectionBD.execute("select * from categorie")
while not liste.eof
response.write("<OPTION VALUE="&liste("id_categorie")&">"&liste("intitule")&"</option>")
liste.movenext
wend%>
</select>
<BR>
Prestation :
<select name="listeB" size="1">
<option value="">---</option>
</select>
<BR>
<BR>

<script>
<!--
   var liste=new Array()
   liste[0]="<select name='listeB'><OPTION VALUE=0>---</OPTION></select>";
<%liste.movefirst
while not liste.eof
   temp="<select name='listeB'>"
      set prestation=ConnectionBD.execute("select * from prestation where id_categorie="&liste("id_categorie"))
   while not prestation.eof
   temp=temp&"<OPTION VALUE="&prestation("id_prestation")&">"&prestation("designation")&"</option>"
   prestation.movenext
   wend
   temp= temp&"</select>"%>
   liste[<%=liste("id_categorie")%>]="<%=temp%>";
<%
liste.movenext
wend
%>

   function changeliste() {
      choix=document.monform.listeA.value;
     document.monform.listeB.outerHTML=liste[choix];
   }
//-->
</script>

Conclusion :


on suppose que la connection à la base de données est déjà faite.

la premiere table s appelle categorie et sa clé primaire id_categorie elle contient un champ intitule qui est som nom.

la seconde table est prestation, sa clé est id_prestation , elle contient un champ id_categorie pour savoir à quelle categorie cette prestation appartient et un champ designation, c est son nom...

qd le formulaire est validé il suffit de récupérer le champ "listeB" avec avec un petit request.form("listeB") et on obtient la clé de l'article sélectionné.

j aime bien parceque tout est dynamique, le javascript comme le HTML et vu que c est mon premier javascript fait tout seul comme un grand...

pour adapter ce code à vos besoin il suffit de remplacer les nom de table et de champ, rien de bien difficile.

Rq:si vous avez des idées pour rendre le code plus propre ou plus léger, je suis preneur!

A voir également

Ajouter un commentaire

Commentaires

sbouchaibi
Messages postés
8
Date d'inscription
mardi 19 février 2008
Statut
Membre
Dernière intervention
13 septembre 2013
-
Bonsoir,

Est ce que vous pouvez me dire comment récupérer les valeurs des deux listes ?
Je sais qu'on utilise : "request.form", par contre, je sais pas comment ?
Merci
cs_Hobby
Messages postés
116
Date d'inscription
mercredi 5 juin 2002
Statut
Membre
Dernière intervention
17 septembre 2008
-
Re Bonjour,

Encore deux choses:
1) Lorsque vous faite un post et que comme moi vous géré les erreurs en asp (exmple: champs vide) lorsque la page est affiché il perd la sélection. J'ai résolut le probleme en sauvegardent la valeur de la liste (via request.form("listeA")) dans une variable et lors de la constuction de la liste je vérifie si le record courant est identique à la variable si oui, j'ajoute "selected='selected'" dans l'option, si non, c'est normal. De plus pour que la seconde liste ce rafraiché j'ai ajouté une variable booleen que je met à true lorsque je passe dans le 'oui' (voir plus haut). En fin de javascript j'ai ajouté: <% If blnListA = True Then response.Write("changeliste();") %> pour le forcé a rafraichir cette liste. Comme j'ai aussi une varible ou j'ai sauvegardé la valeur par le request.form(listeB) je peux assi retrouvé la valeur qui était sélectionné avant le post.
2) Petite correction cela fonctionne en IE7.

Merci
Olivier
cs_Hobby
Messages postés
116
Date d'inscription
mercredi 5 juin 2002
Statut
Membre
Dernière intervention
17 septembre 2008
-
Je confirme le fonctionnement en mode 3 listes.
Juste qu'il faut aussi ajouté dans cette partie:
function changeliste() {
choix=document.monform.listeA.value;
document.monform.listeB.outerHTML=liste[choix];
}
ceci: changelisteb(); (juste a vant le } )
C'est logique sinon la troisièmme liste n'est pas refraichis lorsque l'on chanhe la 1er.

Merci
Olivier
Ps: la source 'original' fonctionne en IE6.
cs_zoume
Messages postés
6
Date d'inscription
jeudi 31 mars 2005
Statut
Membre
Dernière intervention
23 mai 2006
-
bonjour,

j'ai testé ce bout de code sous IE et mozilla.
la deuxieme liste déroulante ne se remplie pas :(
cs_Escob
Messages postés
14
Date d'inscription
vendredi 4 avril 2003
Statut
Membre
Dernière intervention
14 juin 2008
-
petite modif pour que ca fonctionne sous IE et netscape
1. <form name="monform" action="<%=URL%>" method=post>
2.
3. Catégorie :
4. <select name="listeA" size="1" onChange="changeliste()">
5.
6. <option value="0">---</option>
7. <%set liste=ConnectionBD.execute("select * from categorie")
8. while not liste.eof
9. response.write("<OPTION VALUE="&liste("id_categorie")&">"&liste("intitule")&"</option>")
10. liste.movenext
11. wend%>
12. </select>
13.

14. Prestation :
15. <select name="listeB" size="1">
16. <!--<option value="">---</option>-->
17. </select>
18.

19.

20.
21. <script>
22. <!--
23. var liste=new Array()
24. liste[0]="<OPTION VALUE=0>---</OPTION>";
25. <%liste.movefirst
26. while not liste.eof
temp2="<select name='listeB'>"
27. temp=""
28. set prestation=ConnectionBD.execute("select * from prestation where id_categorie="&liste("id_categorie"))
29. while not prestation.eof
30. temp=temp&"<OPTION VALUE="&prestation("id_prestation")&">"&prestation("designation")&"</option>"
31. prestation.movenext
32. wend
33. temp3="</select>"%>
34. liste[<%=liste("id_categorie")%>]="<%=temp%>";
35. <%
36. liste.movenext
37. wend
38. %>
39.
40. function changeliste() {
41. choix=document.monform.listeA.value;
if (navigator.appName=='Netscape') {
document.monform.listeB.innerHTML=liste[choix];
}
else{
42. document.monform.listeB.outerHTML="<%=temp2%>"+liste[choix]+"<%=temp3%>";
43. }
44. //-->
45. </script>

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.