begin process at 2010 03 20 14:00:06
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Base de données

 > 2 LISTES LIÉES DYNAMIQUEMENT ENTRE ELLES, DONT LE CONTENU VIENT D UNE BDD

2 LISTES LIÉES DYNAMIQUEMENT ENTRE ELLES, DONT LE CONTENU VIENT D UNE BDD


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Base de données Classé sous :listes, liées, dynamique, bdd, javascript Niveau :Débutant Date de création :01/08/2001 Date de mise à jour :07/08/2001 00:00:00 Vu :14 816

Auteur : Ray

Ecrire un message privé
Site perso
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

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

  • <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>
<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!


 Sources de la même categorie

Source avec Zip GESTION_ENSEIGNANTS par Elmarzougui
Source avec Zip ZONE MEMBRE EN ASP "E-MEMBRES1.0" par cmaelc
Source avec Zip Source avec une capture Source .NET (Dotnet) ADMINISTRATION BASE DE DONNÉES ORACLE par chbayah
Source avec Zip Source avec une capture Source .NET (Dotnet) UTILISATION D'UN DATASET par ManuAntibes
Source avec Zip Source .NET (Dotnet) INSERTION / RECUPERATION D'IMAGE STOCKEE DANS UNE DB MS SQL ... par jimmy69

 Sources en rapport avec celle ci

Source avec Zip Source .NET (Dotnet) ENVOYER DES DONNÉES D'UN POPUP VERS LE PARENT (JAVASCRIPT) par fredzool
Source avec Zip Source .NET (Dotnet) WEBCONTROL DATEPICKER WEBCONTROLLIBRARY par fredzool
Source avec une capture Source .NET (Dotnet) CALENDRIER POPUP ET MULTICONTROLES par nico5969
Source avec Zip Source .NET (Dotnet) COMPACTER DU JAVASCRIPT par jesusonline
2 LISTES LIEES DYNAMIQUEMENT ENTRE ELLES, DONT LE CONTENU VI... par pantonestudio

Commentaires et avis

Commentaire de PoUpA le 27/04/2002 01:11:02

Magnifique :) j'téais justement en train d'en faire un mais le tien me parais mieux :) tu sauve mon travail de certificat :) plus qu'a le mettre en Jscript et c'est tt bon :) merci

Commentaire de pi0up51 le 16/06/2002 18:03:22

même chose en php ?

Commentaire de Ray le 24/07/2002 12:42:03

c est marrant je repasse 1 an plus tard et je vois que mon script intéresse tjrs des gens ca fait plaisir.

Pour la troisieme liste, c est possible mais je crains que ca devienne tres lourd.

Commentaire de Lelion le 07/01/2003 11:15:56

merci pour ce scripte je le cherche déjas
j'espère que je serai utils pour vous une autres fois

Commentaire de onha le 16/05/2003 10:17:50

Moi par contre j'ai un petit problème il ne veut pas actualisé la deuxième liste.

Commentaire de MrNet le 22/05/2003 13:22:16

Pour 3 Listes :
Creer une Nouvelle Liste : ListeC
copier/coller le script après lui-même, puis sur la copie changer :
Pour les variables javascript
(liste,ListeA,ListeB) par (liste2,ListeB,ListeC)
Changer le nom de la fonction changeliste par changelisteb
Pour les variables ASp :
(temp,liste,Prestation) par (temp2,Prestation,NouvelleReq)
---&gt;Mettre en accord le nom des champs !!!
Dans le premier script changer :
temp="&lt;select name='listeB'&gt;" par temp="&lt;select name='listeB' onchange='changelisteb()' &gt;"

Grosso modo c'est les grandes lignes , chez moi ca marche ...

Commentaire de jcharles le 25/06/2003 10:44:24

bonjour moi je rencontre une erreur:
'document.monform.listeA.value' à la valeur Null ou n'est pas un objet

quelqu'un sait il pq merci

P.S j'utilise internet explorer 6.0

Commentaire de karimking le 07/01/2005 15:56:57

J'utilise également IE 6.0 et ça ne marche pas !
Les valeurs sont chargé dans la premiére liste, la construction de la deusiéme liste est réussi dans le code mais n'actualise pas le contenu lorsque la séléction change dans la premiére liste !

Commentaire de Escob le 10/04/2006 15:40:04

petite modif pour que ca fonctionne sous IE et netscape
1. <form name="monform" action="<%=URL%>" method=post>
   2. <p>
   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. <BR>
  14. Prestation :
  15. <select name="listeB" size="1">
  16. <!--<option value="">---</option>-->
  17. </select>
  18. <BR>
  19. <BR>
  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>

Commentaire de zoume le 07/06/2006 10:50:19

bonjour,

j'ai testé ce bout de code sous IE et mozilla.
la deuxieme liste déroulante ne se remplie pas :(

Commentaire de Hobby le 01/09/2008 05:23:23

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.

Commentaire de Hobby le 01/09/2008 08:01:17

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

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

listes déroulantes liées. [ par rhrmed ] Bonjour,Mon probl&#232;me est le suivant :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Je veux remplir une liste d&#233;roulante &#224; partir de&nbsp;la s&#23 Relence d'une question sans réponse, Listes liées [ par Wassim ] Bonjour,J'ai télchargé l'exemple, 2 combos box dont la 2ème est initialisée selon une sélection effectuée dans lapremière depuis le site , et ça répon Relance question sans réponse: 2 Listes liées [ par Wassim ] Bonjour,J'ai télchargé l'exemple, 2 combos box dont la 2ème est initialisée selon une sélection effectuée dans lapremière depuis le site , et ça répon Listes liées a choix mltiples + BD Access [ par fseb ] Bonjour voila ce que je voudrais faire merci a tout ceux qui pourront m'aider :Moi ce que je veux concretement c'est que par exemple dans la liste 1 t Listes liées a choix mltiples + BD Access [ par fseb ] Bonjour voila ce que je voudrais faire merci a tout ceux qui pourront m'aider :Moi ce que je veux concretement c'est que par exemple dans la liste 1 t Listes liées a choix mltiples + BD Access [ par fseb ] Bonjour voila ce que je voudrais faire merci a tout ceux qui pourront m'aider :Moi ce que je veux concretement c'est que par exemple dans la liste 1 t Listes liées a choix mltiples + BD Access [ par fseb ] Bonjour voila ce que je voudrais faire merci a tout ceux qui pourront m'aider :Moi ce que je veux concretement c'est que par exemple dans la liste 1 t Listes liées a choix mltiples + BD Access [ par fseb ] Bonjour voila ce que je voudrais faire merci a tout ceux qui pourront m'aider :Moi ce que je veux concretement c'est que par exemple dans la liste 1 t Bibliotheques de types (DLL) [ par jeff ] Bonjour à toutes et à tous,Voilà mon pb :je dois recoder des fonctions écrites en javascript en VB.Les fonctions javascript sont contenues dans des fi Probleme en javascript [ par yoyo ] Salut,mon pb en javascript est celui-ci.G une fonction du genre&lt;script language=javascript&gt;&lt;!--function supprimer(formulaire){ formulaire.cha


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,061 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales