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

Commenter

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

S'inscrire maintenant

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.