Discussion :

[dev74]

Bonjour,

Je cherche à mettre en place dans un formulaire 3 listes déroulantes dont la deuxième et troisième liste déroulante dépendent du choix de la première.
Les requêes d'affichage pour afficher les deuxième liste sont différentes l'une de l'autre.

Je me suis basé sur un script fonctionnant avec une liste dépendante que j'ai essayé de modifier pour avoir deux valeurs en retour (id_ecrire_1 & id_ecrire_2). Les requêtes utilisées sont sur deux pages différentes : url_1 et url_2. La valeur source est commune pour les deux requêtes : id_niveau.
Voici mon code :

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
function makeRequest(url_1,url_2,id_niveau,id_ecrire_1,id_ecrire_2)
 
{
var http_request = false;
if (window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
 
}
else if (window.ActiveXObject)
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
 
if (!http_request)
{
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire_1); }
http_request.open('POST', url_1, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
 
 
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire_2); }
http_request.open('POST', url_2, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
 
}
 
function traitementReponse(http_request,id_ecrire)
{
var affich="";
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else
{
alert('Un problème est survenu avec la requête.');
}
}
}
</script>

J'obtiens le message d'erreur : "Un problème est survenu avec la requête"

Merci d'avance pour votre aide

[dubitoph]

Bonjour,

Lorsque je dois faire ce genre de traitement (mise à jour de différents éléments interdépendants), j'utilise la technique suivante : sur le onChange ou le onBlur de la première liste, j'appelle une fonction qui elle-même va en appeler x autres (en fonction du nombre d'éléments à mettre à jour).

ex :

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
<select id='premiereListe' onChange='fctdeMajDesDeuxListes()'>
...
 
fctdeMajDesDeuxListes()
 {
  fctDeMajDeuxiemeListe();
  fctDeMajTroisiemeListe();
 }
 
fctDeMajDeuxiemeListe()
 {
  ...
 }
 
fctDeMaTroisiemeListe()
 {
  ...
 }

De cette manière, je n'ai jamais eu de soucis

J'espère que cela t'aidera quelque peu..