Générer listes dynamiques à partir de deux champs d'une table

Version imprimable

Bonjour,

J'aimerai construire des listes dynamiques à partir d'un champ de ma table, biensûr j'ai fait une recherche sur google et j'ai trouvé de quoi générer des listes avec deux tables différentes, ce qui est très bien.
Ma table très simplifiée pour l'exemple se présente ainsi pour les deux champs concernés :
Pour ma première liste déroulante, elle pourrait contenir (radiateur energetique et accessoires, VisioTree Teflon valves, chauffe-eau frittes robinet...), ma deuxième liste déroulante pourrait contenir (Rondelle Complete Piston, Boite 58 489 (ea), Levier pression, Complete Piston...=
Si on choisit VisioTree Teflon valves dans la première colonne, il faut que dans la deuxième colonne, se génère automatiquement rondelle menesse yu, rondelle basic et rondelle classic par exemple puisque ce sont les caractéristiques pour ces valves là.
Je ne sais pas bien comment faire. Merci pour votre aide :-)

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
 
Nom                                                                  Caractéristiques
radiateur energetique et accessoires			Rondelle Complete Piston
radiateur energetique et accessoires			Rondelle Complete Piston
radiateur energetique et accessoires			Boite 58 489 (ea)
radiateur energetique et accessoires			Boite 58 489 (ea)
radiateur energetique et accessoires			Levier pression
radiateur energetique et accessoires			Levier pression
radiateur energetique et accessoires			Levier pression58 489 (ea)
radiateur energetique et accessoires			Levier pression
radiateur energetique et accessoires			Levier pression
robinet alluminium			
robinet alluminium			
robinet alluminium				
radiateur steel preparative et accessoires			Complete Piston
radiateur steel preparative et accessoires			Complete Piston
radiateur steel preparative et accessoires			Complete Piston
radiateur steel preparative et accessoires			Replacement Piston/Frit, 2μm
radiateur steel preparative et accessoires			Replacement Piston/Frit, 2μm
radiateur steel preparative et accessoires			Replacement Piston/Frit, 2μm
chauffe-eau frittes robinet			
chauffe-eau frittes robinet			
VisioTree Teflon Kits			
VisioTree Teflon Kits			
VisioTree Teflon Kits			
VisioTree Teflon valves			rondelle menesse yu
VisioTree Teflon valves			rondelle menesse yu
VisioTree Teflon valves			rondelle menesse yu
VisioTree Teflon valves			rondelle menesse yu
VisioTree Teflon valves			rondelle Basic
VisioTree Teflon valves			rondelle Basic
VisioTree Teflon valves			rondelle Basic
VisioTree Teflon valves			rondelle Basic
VisioTree Teflon valves			rondelle Basic
VisioTree Teflon valves			rondelle Classic
VisioTree Teflon valves			rondelle Classic

Et le petit code qui va bien pour trois listes dynamiques mais sur trois tables différentes...

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
 
 
//connexion base
 
if(isset($_POST['ok'])){
 //le bouton ok du formulaire a été cliqué
 $ville=isset($_POST['ville']) ? $_POST['ville'] : "";
 $sql3 = "SELECT lien, ville FROM liens_villes WHERE id_ville='".$ville."'";
 $rech_lien= mysql_query($sql3) or die('Pb requette lien '.mysql_error());
 $ligne=mysql_fetch_assoc($rech_lien);
 $lien=$ligne['lien'];
 //on redirige directement vers la page du lien
 header('Location:'.$lien.'');
}
///
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
 
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
?>
 
<?php
 
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
 
?>
 
<?php
//recupération des selections éventuelles sinon init à vide
 
$region=isset($_POST['region']) ? $_POST['region'] : "";
$departement=isset($_POST['departement']) ? $_POST['departement'] : "";
 
//
//connexion a mysql contarirement à ce qui était dit mysql suffit pendant tout le scipt
//par contre c'est dépassé il faut utiliser PDO::
//pour le moment une solution avec mysql
 
?>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">
<fieldset style="border: 3px double #333399"><legend>Sélectionnez une région</legend>
<select name="region" id="region" onchange="submit();">
<option value="-1">- - - Choix - - -</option>
 
<?php
$sql1 = "SELECT id_region, region FROM region ORDER BY region"; //par orde alpa des noms c'est qd mêm mieux !
 
 
$rech_regions = mysql_query($sql1) or die('Pb requette régions '.mysql_error());
while($ligne = mysql_fetch_assoc($rech_regions)){
//pas besoin de passer par des array
//generation de la ligne option
$option= '<option value="'.$ligne['id_region'].'" ';
if($region==$ligne['id_region']){$option.= ' selected="selected"';} //ça c'est pour conserver la sélection au réafficage suivant
$option.=' >'.$ligne['region'].'</option>';
//affichage de la ligne option
echo $option;
}
mysql_free_result($rech_regions);
?>
</select>
<?php
 
//liste departements
if(isset($_POST['region'])){
if($_POST['region']==-1){
echo 'Vous devez chosir une région';
}else{
?>
<select name="departement" id="departement" onchange="submit();">
<option value="-1">- - - Choisissez un département - - -</option>
<?php
 
$sql2 = "SELECT id_departement, departement FROM departement WHERE id_region='".$region."' ORDER BY departement";
$rech_departement = mysql_query($sql2) or die('Pb requette departement '.mysql_error());
while($ligne = mysql_fetch_assoc($rech_departement)){
 
//generation de la ligne option
$option= '<option value="'.$ligne['id_departement'].'" ';
if($departement==$ligne['id_departement']){$option.= ' selected="selected"';} //ça c'est pour conserver la sélection au réafficage suivant
$option.=' >'.$ligne['departement'].'</option>';
//affichage de la ligne option
echo $option;
}
mysql_free_result($rech_departement);
 
?>
</select>
<?php
}
}
//liste villes
if(isset($_POST['departement'])){
if($_POST['departement']==-1){
echo 'Vous devez chosir un departement';
}else{
?>
<select name="ville" id="ville">
<option value="-1">- - - Choisissez une ville - - -</option>
<?php
 
$sql3 = "SELECT id_ville, ville FROM ville WHERE id_departement='".$departement."'ORDER BY ville";
 
$rech_ville = mysql_query($sql3) or die('Pb requette ville '.mysql_error());
while($ligne = mysql_fetch_assoc($rech_ville)){
 
//generation de la ligne option
$option= '<option value="'.$ligne['id_ville'].'" ';
if($departement==$ligne['id_ville']){$option.= ' selected="selected"';} //ça c'est pour conserver la sélection au réafficage suivant
$option.=' >'.$ligne['ville'].'</option>';
//affichage de la ligne option
echo $option;
}
mysql_free_result($rech_ville);
 
?>
 
</select>
<br /><input type="submit" name="ok" id="ok" value="Envoyer" />
 
<?php
}
}
 
?>
 
</fieldset>
</form>
<?php
/* Terminé, on ferme la connexion */
mysql_close($connexion);
?>
 
</body>
</html>

11/04/2016, 22h42
sabotage

Pourquoi tu nous montres un code qui n'a pas de rapport avec ton projet ?

Un exemple de listes liées en ajax :
http://siddh.developpez.com/articles/ajax/
12/04/2016, 08h42
zen'it

Bonjour et merci pour la réponse. Le problème c'est que je débute en php alors l'ajax pour l'instant, c'est un peu trop compliqué pour moi. j'ai mis un code parce que je pensais pouvoir partir de là pour m'aider.
Est-ce qu'il n'est pas possible de faire quelque chose de plus simple en php que je puisse comprendre dans un premier temps ?
Merci
12/04/2016, 16h12
Invité
Bonjour,
- [Article] Créer des listes déroulantes liées entre elles sans utiliser Ajax
Si tu veux de l'aide, montre-nous la structure de tes TABLES (utiles) en base de données.

Merci pour vos réponses et le temps que vous m'avez consacré. J'ai commencé à regarder avec l'ajax mais je ne sais pas comment construire ma deuxième liste à partir du champ description2. les exemple sont tous avec deux tables et moi il faut que je travaille sur une seule table pour le projet ;-)

Voici ma table :

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
 
CREATE TABLE IF NOT EXISTS `ajax_liste1` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `description1` varchar(50) COLLATE latin1_general_ci NOT NULL,
  `description2` varchar(50) COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;
 
--
-- Contenu de la table `ajax_liste1`
--
 
INSERT INTO `ajax_liste` (`id`, `description1`,description2') VALUES
(1, 'critere 1','critere 1_liste 2'),
(2, 'critere 1','critere 1_liste 2'),
(3, 'critere 1','critere 1_liste 2'),
(4, 'critere 1','critere 1_liste 2'),
(5, 'critere 1','critere 2_liste 2'),
(6, 'critere 2','critere 2_liste 2'),
(7, 'critere 2','critere 2_liste 2'),
(8, 'critere 2','critere 2_liste 2'),
(9, 'critere 2','critere 3_liste 2'),
(10, 'critere 3','critere 3_liste 2'),
(11, 'critere 3','critere 3_liste 2'),
(12, 'critere 3','critere 3_liste 2'),
(13, 'critere 4','critere 4_liste 2'),
(14, 'critere 4','critere 4_liste 2'),
(15, 'critere 4','critere 4_liste 2'),
(16, 'critere 4','critere 4_liste 2'),
(17, 'critere 5','critere 5_liste 2'),
(18, 'critere 5','critere 5_liste 2'),
(19, 'critere 6','critere 6_liste 2'),
(20, 'critere 6','critere 6_liste 2');

Et pour le code, j'ai commencé avec ceci :

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
85
86
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Listes li&eacute;es</title>			
//fonction d’instanciation, création de l'objet xhr
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
 
function selectEditor(oElem) {
 
	var xhr = getXMLHttpRequest();
	var value =  oElem.options[oElem.selectedIndex].value;
	if(value != "none") {
		if(xhr && xhr.readyState != 0) {
			xhr.abort(); 
		} 
 
		/*Envoi d’une requête HTTP */
 
		xhr.onreadystatechange = function() { 
			if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
				makeList(xhr.responseXML);
				document.getElementById("loading").innerHTML = "";
			} else if(xhr.readyState == 2 || xhr.readyState == 3) {
				document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
	  		}
		}
 
	/*Maintenant que la requête est prête, on peut l’envoyer. */
		xhr.open("POST", "Grace_ajax2.php", true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("IdEditor=" + value);
	}
 
}
 
 
//la fonction makeList qui analyse les données XML et recrée les éléments <option> de la liste déroulante 
function makeList(oData) {
	var oOptions = oData.getElementsByTagName("option");
	var oSelect  = document.getElementById("liste1Select");
 
	oSelect.innerHTML = "";
	for(var i=0,c=oOptions.length;i<c;i++) {
		var oOption = document.createElement("option");
		oOption.value = oOptions[i].getAttribute("value");
		oSelect.appendChild(oOption);
		oOption.innerHTML = oOptions[i].firstChild.nodeValue;
	}
}
//-->
</script>
</head>
 
<body>
<fieldset>
	<legend>Programmes</legend>
	<div id="programBox">
		<div id="loading"></div>
		<div id="editors">
			<select id="editorsSelect" onchange="selectEditor(this);">
				<option value="none">Selection</option>
				<?php
 
					mysql_connect("localhost","root","");
					mysql_select_db("test_ajax");
 
					//mysql_connect($hote, $login, $m_d_p);
					//mysql_select_db($bdd);
					$query = mysql_query("SELECT * FROM ajax_liste ORDER BY name");
					while($back = mysql_fetch_assoc($query)) {
						echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["description1"]."</option>\n";
					}
				?> 
			</select>
		</div>
		<div id="liste1">
			<select id="liste1Select"></select>
		</div>
	</div>
</fieldset>
</body>
</body>
</html>

14/04/2016, 21h22
sabotage

Que ce soit une table ou deux tables ne change rien.
Je ne vois pas ce que représente cette table que tu nous montres là.
Si on reprend la première table que tu nous a montré, ta requête pour la première liste c'est

Code:

SELECT DISTINCT nom FROM tatable

et pour la deuxième liste

Code:

SELECT caracteristique FROM tatable WHERE nom = :valeur_recue_de_la_premiere_liste
14/04/2016, 22h12
Invité
Bonjour,

Correction au vu de la table créée :
pour la 1ère liste :

Code:

SELECT DISTINCT description1 FROM ajax_liste1;

pour la 2ème liste :

Code:

SELECT DISTINCT description2 FROM ajax_liste1 WHERE description1 = :valeur_description1_recue_de_la_premiere_liste;

Cela dit, la table est très mal conçue.
En plus, à quoi ça sert d'avoir des doublons ? :koi:
ex. :
Code:

1 2 radiateur energetique et accessoires Levier pression radiateur energetique et accessoires Levier pression
15/04/2016, 11h44
zen'it
Merci pour vos réponses, c'est vrai que ma table est très mal faite mais j'ai d'autres champs en plus derrière qui permettent de différencier les résultats, j'ai fait au plus simple pour tester le problème des listes liées.
J'ai mis ce code pour la deuxième liste :
Code:

1 2 $query = mysql_query("SELECT DISTINCT description2 FROM ajax_table WHERE description1=".$idEditor." ORDER BY name");
Ca marche bien ;-)
Merci