Afficher listes dynamiques liées a la premiere

Version imprimable

Bjour, voila j'ai une liste déroulante proposant des types d'autos. L'objectif est d'afficher une liste d'attributs differents en fonction de ce qui est choisi dans la premiere liste...

J'ai une vague idée, enfin l'algo, de ce qui doit etre fait, mais si quelqu'un pourrait m'eclairer un peu ce serait simpa :)

Code:

Type de véhicule </td><td class="attributeinput"><select name="attribute42" class="attributeinput"><option value="3" >coupé<option value="2" >rallye<option value="1" >sport</select>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 SI attribute42 = coupé ALORS $sql_famille = SELECT MLIB FROM `phplist_listattr_mfam` WHERE MFAM = "cou"; SI attribute42 = rallye ALORS $sql_famille = SELECT MLIB FROM `phplist_listattr_mfam` WHERE MFAM = "ral"; SI attribute42 = sport ALORS $sql_famille = SELECT MLIB FROM `phplist_listattr_mfam` WHERE MFAM = "spo"; // on envoie la requête $req_famille = mysql_query($sql_famille) ;
Voila et apres ce que je souhaiterai c'est d'afficher ce resultat dans une liste déroulante...Voila si quelqu'un peut filer un coup de main...merci d'avance de votre aide :)

01/09/2006, 15h25
Kerod
Tu as deux possibilités :
- Ajax sans rechargement de la page : Listes déroulantes liées entre elles
- PHP & Mysql et il suffira de récupérer l'id de l'élément choisi
01/09/2006, 15h33
metatron

wé merci de liens j'avais deja été voir ce tuto

http://javascript.developpez.com/faq...js#listesLiees

Mais ce ne sont que des valeurs statiques dans ce cas. une fois la premeiere liste renseigné par mes vaeurs statiques (coupe,sport,rallye) Comment s'appliquerai cet exemple a mon code ? car en plus dans mon code la restriction "le where) ne se fait pas directement sur la valeur choisie de la liste déroulante, c'est les 3 premiers caracteres qui comptent.
01/09/2006, 15h48
Kerod

Ce sont des if selon ce que tu as donné plus haut. Il suffit donc de faire une série de if pour consitituer ta requête.Et ça peut fonctionner en ajax ou en php simple.

En gros tu démarres ta requete normalement. Tu t'arretes à l'endroit où tu dois mettre ton where, et tu commences ta série de if puis tu la termines

ok pour les if, mais dans ce cas la quelle serait la syntaxe a adapter pour permettre d'afficher la 2e lsite en fonctin de ce qui a été choisi ? :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <select name="attribute42" class="attributeinput"><option value="coupé" >coupé<option value="rallye" >rallye<option value="sport" >sport</select> <? if(attribute42 = 'rallye'){ $sql = "SELECT MLIB FROM `phplist_listattr_model` WHERE MFAM = 'RAL' " ; $result = mysql_query ( $sql ) ; echo $row['MLIB'] ; <select name="attribute43" class="attributeinput"><option value="$row['MLIB']" >$row['MLIB']</select> } ?>
Voila mais je ne vois pas exactment la syntaxe a appliquer et des atributs, je pense que la theorie c'est bien ca mais ca donnerait quoi en pratique please ? :)

Exemple :
on va nommer la valeur du premier select : $firsval ;). Moi je préfère travailler avec l'id, donc on va supposer que les valeurs dans ton select sont les id dans la table
Code:

1 2 3 4 5 6 7 $query = 'SELECT * FROM nomtable WHERE idpremieretable = $fistval'; $result = mysql_query($query) or die(mysql_error()); while($row = mysql_fecth_array($result)) { tu construis ton select }

Citation:
Envoyé par Kerod
Exemple :
on va nommer la valeur du premier select : $firsval ;). Moi je préfère travailler avec l'id, donc on va supposer que les valeurs dans ton select sont les id dans la table
Code:

1 2 3 4 5 6 7 $query = 'SELECT * FROM nomtable WHERE idpremieretable = $fistval'; $result = mysql_query($query) or die(mysql_error()); while($row = mysql_fecth_array($result)) { tu construis ton select }
Okay merci. Mais dans ce cas la je suis obligé de recharger la page ou cela s'affiche directement ?

03/09/2006, 04h31
Kerod

Je dirais que tout dépend de la manière que tu souhaites faire. Si c'est en php simple tu devras faire une soumission de la valeur de ton premier select (grace à du javascript) si c'est en ajax tu devras juste faire appel à une fonction qui prendra comme paramètre l'id de l'élément choisi et le reste se fera tout seul sans rechargement de la page ;)
03/09/2006, 17h09
metatron

Je vais rester avec du JS je pense. :) et dans ce cas la, par rapport au tuto ici :

http://javascript.developpez.com/faq...js#listesLiees ca donnerait quoi comme type de code pour mon exemple ? enfin avec la 1ere liste statique, et la 2eme liste dynamique (qui va recuperer les valeurs dans la base par rapprot a ce qui a été choisi dans la premiere) ? Merci d'avance de l'aide.
03/09/2006, 18h45
Kerod

Ca te donne ça : Ajax - une autocomplétion pas à pas ou ceci :Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
04/09/2006, 09h41
metatron

hum, la procédure en JS pur me paraissait plus simple non ?

http://javascript.developpez.com/faq...js#listesLiees

oups, j'ai vu que le tableau styleSheets n'existe pas dans Opera non plus, et je travaille essentielement sous opera oO.

Re, je viens donc de tester ce code provenant du tuto, mais je ne vois pas vraiment ou et comment afficher mes variables en fonction de ce qui est choisi dans la 1ere (coupe, sport etc...) ...Pourriez vous donnez un petit coup de main please ?

( si on choisi coupé, alors cela va afficher la requete WHERE type = "coupé"
si on choisi sport, alors cela va afficher la requete WHERE type = "sport"
etc )

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html> 
<head> 
<script language="javascript"> 
var pays = new Array; //nouveau tableau 
pays[0] = new Array("p0", "coupe"); //nouveau tableau, on va donc avoir pays[0][0]="p0" 
pays[1] = new Array("p1", "sport"); 
pays[2] = new Array("p2", "cabriolet"); 
var ville=new Array; 
// pays0 
ville["p0"] = new Array; 
ville["p0"][0] = new Array("p0v0", "pays0-ville0"); 
ville["p0"][1] = new Array("p0v1", "pays0-ville1"); 
//pays1 
ville["p1"]=new Array; 
ville["p1"][0] = new Array("p1v0", "pays1-ville0"); 
ville["p1"][1] = new Array("p1v1", "pays1-ville1"); 
//pays2 
ville["p2"] = new Array; 
ville["p2"][0] = new Array("p2v0", "pays2-ville0"); 
ville["p2"][1] = new Array("p2v1", "pays2-ville1"); 
var rue = new Array; 
function filltheselect(liste, choix) 
{switch (liste) 
   { 
   case "listepays": 
      raz("listeville"); 
 
      for (i=0; i<ville[choix].length; i++) 
         { 
         new_option = new Option(ville[choix][i][1],ville[choix][i][0]); 
         document.formu.elements["listeville"].
		 	options[document.formu.elements["listeville"].length]=new_option; 
         }     
      break; 
   case "listeville":      
   } 
} 
function raz(liste) 
{l=document.formu.elements[liste].length; 
for (i=l; i>=0; i--) 
   document.formu.elements[liste].options[i]=null;
}    
</script> 
</head> 
<body> 
<?
$db = mysql_connect('localhost', 'login', 'password')  or die('Erreur de connexion '.mysql_error());
mysql_select_db('my_base',$db)  or die('Erreur de selection '.mysql_error());
$sql = "SELECT  MFAM FROM `attr_model` WHERE type = "coupé""; etc...
mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
echo 'Vos infos on été ajoutées.';
<select name="listeville" > liste déroulante affichant MFAM
?>
<form name="formu"> 
Choisir un pays 
<select name="listepays" onChange='javascript:filltheselect(this.name, this.value)'> 
   <script language="javascript"> 
   for (i=0; i<pays.length; i++) 
      document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]); 
   </script> 
</select> 
<br> 
Choisir une ville 
<select name="listeville" onChange='javascript:filltheselect(this.name, this.value)'> 
   <script language="javascript"> 
   for (i=0; i<ville["p0"].length; i++) 
      document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]); 
   </script> 
</select> 
<br> 
</form> 
</body> 
</html>

Merci d'avance de votre aide. :)

04/09/2006, 16h23
metatron

quelqu'un aurait une idée comment realiser cela en JS sans ajax alors ? :(

Re, j'ai donc re essayé ce code du tuto, mais je ne vois tjs pas quel code appliquer pour faire les IF et afficher la 2e liste...donc l'exemple du dessous c est tout en JS, ca permet d'afficher les valeurs de la 2e liste en fonction de ce qui est choisi dans la premiere..mais la toutes les valeurs sont statiques.

dans la premiere liste , juste en dessous, j'ai fait afficher les valeurs sont en dur. (coupé, sport, cab)

Et je voudrai des boucle de ce type la :

SI valeur_choisie_liste_1 = coupé
FAIRE SELECT MLIB from .... WHERE MFAM = "cou"
AFFICHER LISTE_2 avec les VALEURS_DE_MLIB
SI valeur_choisie_liste_1 = sport
FAIRE SELECT MLIB from .... WHERE MFAM = "spo"
AFFICHER LISTE_2 avec les VALEURS_DE_MLIB
SI valeur_choisie_liste_1 = cabriolet
FAIRE SELECT MLIB from .... WHERE MFAM = "cab"
AFFICHER LISTE_2 avec les VALEURS_DE_MLIB

voila et que grace a ce code ca se fasse sans rafraichir la page

CREATE TABLE `phplist_listattr_model` (
`id` int(11) NOT NULL auto_increment,
`MFAM` char(2) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3 ;

voila le code avec les valeurs statiques, si quelqu un pourrait me montrer un exemple d'un boucle et l'affichage dans la 2e liste,ce serait supeeer cool :
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <html> <head> <script language="javascript"> </script> </head> <body> <? $db = mysql_connect('localhost', 'root', '') or die('Erreur de connexion '.mysql_error()); mysql_select_db('phplistdb',$db) or die('Erreur de selection '.mysql_error()); $sql = "SELECT MLIB FROM `phplist_listattr_model`"; $result = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); $total = mysql_num_rows($result); ?> <html> <head> <script language="javascript"> var pays = new Array; //nouveau tableau pays[0] = new Array("p0", "coupé"); //nouveau tableau, on va donc avoir pays[0][0]="p0" pays[1] = new Array("p1", "sport"); pays[2] = new Array("p2", "cab"); var ville=new Array; // pays0 ville["p0"] = new Array; ville["p0"][0] = new Array("p0v0", "pays0-ville0"); ville["p0"][1] = new Array("p0v1", "pays0-ville1"); //pays1 ville["p1"]=new Array; ville["p1"][0] = new Array("p1v0", "pays1-ville0"); ville["p1"][1] = new Array("p1v1", "pays1-ville1"); //pays2 ville["p2"] = new Array; ville["p2"][0] = new Array("p2v0", "pays2-ville0"); ville["p2"][1] = new Array("p2v1", "pays2-ville1"); function filltheselect(liste, choix) {switch (liste) { case "listepays": raz("listeville"); for (i=0; i<ville[choix].length; i++) { new_option = new Option(ville[choix][i][1],ville[choix][i][0]); document.formu.elements["listeville"]. options[document.formu.elements["listeville"].length]=new_option; } for (i=0; i<rue[choix+"v0"].length; i++) break; case "listeville": } } function raz(liste) {l=document.formu.elements[liste].length; for (i=l; i>=0; i--) document.formu.elements[liste].options[i]=null; } </script> </head> <body> <form name="formu"> Choisir un pays <select name="listepays" onChange='javascript:filltheselect(this.name, this.value)'> <script language="javascript"> for (i=0; i<pays.length; i++) document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]); </script> </select> <br> Choisir une ville <select name="listeville" onChange='javascript:filltheselect(this.name, this.value)'> <script language="javascript"> for (i=0; i<ville["p0"].length; i++) document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]); </script> </select> <br> </form> </body> </html>
Merci d avance de votre aide. :)

05/09/2006, 14h44
Kerod

Je te conseille franchement d'utiliser ajax pour la récupération des infos dans la bdd, ce sera plus simple que crée une infinité de array dynamique js (ce qui risque aussi de prendre de la mémoire).

Regardes du coté d'ajax. En plus ce que tu demandes en exposant tes requêtes et etc...sous entend Ajax alors que toi tu veux absolument faire JS simple
05/09/2006, 15h06
metatron

Et si je n'ai aps le droit d'utiliser des scripts Ajax sur le server que je use ? :(
05/09/2006, 15h41
Kerod

Alors php :roll: mais supposons que tu ais une infinité de valeur dans ton premier select, il va falloir créer des array js en fonction de cette infinité de valeurs...

Le temps de chargement risque d'en prendre un coup et etc....

Alors soit ajax, soit php

ok pour le php...mais dans l'exemple que j'ai vu , le <form action> apele :

Code:

<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">

hors j'utilise deja le form action pour renvoyer vers ma page de validation...qu'aurais a modifier dans le code ci dessous pour rendre tout cela compatible et afficher la la 2e liste en fonction de ce qui est choisi dans la 1ere ?

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
 
<form name ="form1" onSubmit="return checkbae()" action="http://localhost/lists/"> 
 
<!-- Liste statique 1-->
liste 1
<select name="list1_type">
<option value="coupe" >coupe
<option value="sport" >sport
<option value="cabriolet" >cabriolet
</select>
<br><br><br>
 
<!-- exemple de code PHP allant recuperer les valeurs de la liste pour un type de véhicule-->
<?
$db = mysql_connect('localhost', 'root', '')  or die('Erreur de connexion '.mysql_error());
mysql_select_db('phplistdb',$db)  or die('Erreur de selection '.mysql_error());
 
// test pour afficher les champs de TOUT les types de vehicules
$sql = "SELECT  MLIB FROM `phplist_listattr_model`"; 
$result = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
$total = mysql_num_rows($result);
 
// Liste dynamique 2, affichant le champ MLIB
echo 'liste 2 ';
echo '<select name="list2_modele">';
while($row = mysql_fetch_array($result)) 
{
echo "<option value='".$row["MLIB"]."'>".$row["MLIB"]."</option>";
}
echo "	</select>";
?>

ps : merci en tout k kerod ://

05/09/2006, 16h22
Kerod

ta page de validation sert à quoi ??

Sinon pour la seconde liste : tu la remplis que s'il y a sélection ou tout le temps ?
05/09/2006, 16h34
metatron

Citation:

Envoyé par Kerod

ta page de validation sert à quoi ??

Sinon pour la seconde liste : tu la remplis que s'il y a sélection ou tout le temps ?

La page de validation sert ensuite a stocker les données dans les tables, et envoyer un mail a celui venant de valider le formulaire etc...

Et il y'a forcement selection, avec une valeur par defaut, donc la 2e liste contient tjs kelkechose.
05/09/2006, 16h46
Kerod
On pourrait peut-être jouer avec les includes. Ce que j'entends par là c'est que tu peux faire une condition d'inclusion comme ceci :
Code:

1 2 3 4 if($_POST) { include('tonfichier.php'); }
Comme ça tu exécutes ta maj bdd sur la même page mais que si tu as envoyé la sélection. Puis là tu modifies ta variable qui prend en compte le filtre de ton deuxième select.

C'est une solution qui permettrait de passer par ta page de validation et de récupérer ta valeur choisi.

Sinon autre possibilité tu gardes ton form comme il est et dans ta page de validation à la fin de toute tes maj tu fais une redirection avec un header ou en js en passant en get la valeur du select. Comme ça ça évitera le repostage du formulaire s'il y a un refresh de la page par l'utilisateur