Afficher listes dynamiques liées a la premiere

**metatron** · 01/09/2006, 14h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Kerod** · 01/09/2006, 15h25

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

**metatron** · 01/09/2006, 15h33

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.

**Kerod** · 01/09/2006, 15h48

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

**metatron** · 01/09/2006, 16h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Kerod** · 01/09/2006, 16h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
}

**metatron** · 03/09/2006, 03h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Kerod** · 03/09/2006, 04h31

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

**metatron** · 03/09/2006, 17h09

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.

**Kerod** · 03/09/2006, 18h45

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

**metatron** · 04/09/2006, 09h41

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.

**metatron** · 04/09/2006, 09h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**metatron** · 04/09/2006, 16h23

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

**metatron** · 05/09/2006, 12h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Kerod** · 05/09/2006, 14h44

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

**metatron** · 05/09/2006, 15h06

Et si je n'ai aps le droit d'utiliser des scripts Ajax sur le server que je use ?

**Kerod** · 05/09/2006, 15h41

Alors php

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

**metatron** · 05/09/2006, 15h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ://

**Kerod** · 05/09/2006, 16h22

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 ?

**metatron** · 05/09/2006, 16h34

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.

Afficher listes dynamiques liées a la premiere

JavaScript

Discussions similaires

Partager

Partager