[AJAX] Lier trois (03) listes déroulantes entre elles

**Ruy Blas** · 06/06/2013, 13h00

Salut les amis, je rencontre un souci actuellement. Je souhaiterais lier 3 listes déroulantes. Me servant d'un exemple trouvé sur le net, j'ai pu lier la 1ère liste et la 2nde liste mais je ne parviens à lier la 2ème liste à la 3ème.
Aussi, je souhaiterais que l'utilisateur en fonction du choix qu'il aura effectué dans la 3ème liste déroulante, un formulaire de saisie puisse s'afficher sur la meme page afin qu'il le renseigne.
Merci pour d'avance pour vos contributions. Ci-dessous les scripts que j'ai réalisés :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>CALCUL DES QUANTITES</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ 
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
 
function go_prix(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('prix').innerHTML = leselect;
}
}
 
xhr.open("POST","quantite_prix.php",true);
 
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
sel = document.getElementById('section');
fk_sectionprix = sel.options[sel.selectedIndex].value;
xhr.send("fk_sectionprix="+fk_sectionprix);
}
 
function go_sousprix(){
var xhr = getXhr();
 
xhr.onreadystatechange = function(){
 
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
 
document.getElementById('sousprix').innerHTML = leselect;
}
}
 
xhr.open("POST","quantite_sousprix.php",true);
 
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
sel = document.getElementById('prix');
fk_prixsousp = sel.options[sel.selectedIndex].value;
xhr.send("fk_prixsousp="+fk_prixsousp);
}
 
</script>
</head>
<body>
<form>
<fieldset style="width: 1100px">
<legend>Calcul des Quantités </legend>
<label>SECTION </label>
<select name='section' id='section' onchange='go_prix()'>
<option value='-1'>Choisir une section</option> 
<?php
mysql_connect("localhost","root","");
mysql_select_db("Calcul");
$res = mysql_query("SELECT * FROM section ORDER BY idsection");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["idsection"]."'>".$row["libsection"]."</option>";
}
?>
</select>
<label>PRIX </label>
<div id='prix' style='display:inline'>
<select name='prix' id="prix" onchange = 'go_prix()'>
<option value='-1'>Choisir un prix</option>
</select>
</div>
 
</select>
<label>SOUSPRIX </label>
<div id='sousprix' style='display:inline'>
<select name='sousprix' id="sousprix" onchange = 'go_sousprix()'>
<option value='-1'>Choisir un sous prix</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo " <select name='prix'>";
if(isset($_POST["fk_sectionprix"])){
mysql_connect("localhost","root","");
mysql_select_db("Calcul");
$res = mysql_query("SELECT idprix, libprix FROM prix
WHERE fk_sectionprix=".$_POST["fk_sectionprix"]." ORDER BY libprix");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["idprix"]."'>".$row["libprix"]."</option>";
}
}
echo "</select>";
?>

**rawsrc** · 06/06/2013, 17h53

Salut,

j'ai fait un tuto sur les listes liées ici, en espérant que cela t'inspireras car ce sujet a été abordé maintes et maintes fois sur le forum.

**andry.aime** · 07/06/2013, 08h20

Bonjour,

Un id doit être unique.
de même ici:

et modifie ensuite ton code javascript par rapport aux nouveaux id.

A+.

**Ruy Blas** · 07/06/2013, 16h07

Merci à rawsrc et andry.aime, grace à vos suggestions, j'ai résolu en partie mon problème car j'arrive à lier parfaitement les trois (03) listes déroulantes.
toutefois il me reste une dernière barrière à franchir, comme je l'ai signifié dans le 1er message que j'ai posté, je souhaiterais aussi que l'utilisateur en fonction du choix qu'il aura effectué dans la 3ème liste déroulante, puisse être redirigé vers un formulaire de saisie qui si possible devra s'afficher sur la meme page afin qu'il le renseigne.
merci d'avance pour vos suggestions et conseils.

**andry.aime** · 07/06/2013, 16h24

Tu peux mettre directement les éléments du formulaire directement sur la page et jouer avec display:none et display:block avec javascript selon la valeur du 3ème select.
Si une requête vers le serveur est nécessaire, tu peux le faire de la même façon que les listes liées.

A+.

[AJAX] Lier trois (03) listes déroulantes entre elles

AJAX

Discussions similaires

Partager

Partager