Griser une liste déroulante

Version imprimable

Bonjour tout le monde,

J'ai un petit souci dans mon code JS, en fait, j'ai trois liste déroulante, je veux griser la troisième liste déroulante lorsque je choisi une valeur dans ma première liste, et la remettre en etat normal lorsque je remet ma premiere liste deroulante à sa valeur par defaut, la même chose pour la deuxième liste qui grise la troisième liste déroulante. Voici le code html ci-dessous:

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
<table>
   <tr>
	<td>
		<label for="analogue_rapides">Analogues rapides<br>
		<select class="input" id="analogue_rapides" name="analogue_rapides" style="width:130px">  
		   <option>choisissez...</option>
		   <option value="apidra">Apidra</option>
		   <option value="novorapid">Novorapid</option>
		   <option value="humalog">Humalog</option>
		   <option value="autre">Autre</option>
		</select></label>
	</td>
	<td>
		<label for="dose_analogue">Dose<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="dose_analogue" name="dose_analogue"></label><br>
		<label for="injection_analogue">Nombre d'injection/jour<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="injection_analogue" name="injection_analogue"></label>
	</td>
	<td>
		<label for="doseT_analogue">Dose totale<br>
		<input type="text" tabindex="10" size="20" value="---" class="input" id="doseT_analogue" name="doseT_analogue" disabled="disabled"></label> (UI/j)
	</td>
	</tr>
	<tr>
	<td>
		<label for="analogue_lentes">Analogues lentes<br>
		<select class="input" id="analogue_lentes" name="analogue_lentes" style="width:130px">  
		   <option>choisissez...</option>
		   <option value="lantus">Lantus</option>
		   <option value="levemir">Levemir</option>
		   <option value="insulatard">Insulatard</option>
		   <option value="autre">Autre</option>
		</select></label>
	</td>
	<td>
		<label for="dose_analogueL">Dose<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="dose_analogueL" name="dose_analogueL"></label><br>
		<label for="injection_analogueL">Nombre d'injection/jour<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="injection_analogueL" name="injection_analogueL"></label>
	</td>
	<td>
		<label for="doseT_analogueL">Dose totale<br>
		<input type="text" tabindex="10" size="20" value="---" class="input" id="doseT_analogueL" name="doseT_analogueL" disabled="disabled"></label> (UI/j)
	</td>
	</tr>
	<tr>
	<td>
		<label for="analogueM">Analogue mixte<br>
		<select class="input" id="analogueM" name="analogueM" style="width:130px"> 
		   <option>choisissez...</option>
		   <option value="novomix">Novomix 30</option>
		   <option value="humalog">Humalog Mix 25</option>
		   <option value="autre">Autre</option></label>
	</td>
	<td>
		<label for="dose_analogueM">Dose<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="dose_analogueM" name="dose_analogueM"></label><br>
		<label for="injection_analogueM">Nombre d'injection/jour<br>
		<input type="number" min="1" max="4" step="1" tabindex="10" size="20" value="" class="input" id="injection_analogueM" name="injection_analogueM"></label>
	</td>
	<td>
		<label for="dose_autreL">Dose totale<br>
		<input type="text" tabindex="10" size="20" value="---" class="input" id="dose_autreL" name="dose_autreL" disabled="disabled"></label> (UI/j)
	</td>
	</tr>
</table>

Et voici le code JS ci-dessous:

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
var e13 = document.getElementById("analogue_rapides");
	var elem_dose_analogue = document.getElementById("dose_analogue");
    var elem_injection_analogue = document.getElementById("injection_analogue");
 
	function calcul_mgj13() {
 
		var list_idx = e13.options[e13.selectedIndex].index;
 
		var nb_mg = document.getElementById("dose_analogue");
		var mg = parseFloat(nb_mg.value);
 
		var elem_dose = document.getElementById("injection_analogue");
		var dose = parseFloat(elem_dose.value);
 
		var elem_result = document.getElementById("doseT_analogue");
 
		if (elem_dose.value != ''){
			elem_result.value = parseFloat(mg * dose).toFixed(2);
		}
 
		e15.disabled=(list_idx > 0);
        elem_dose_analogueM.disabled=(list_idx > 0);
        elem_injection_analogueM.disabled=(list_idx > 0);
 
	}
	elem_dose_analogue.addEventListener("blur", calcul_mgj13);
	elem_injection_analogue.addEventListener("blur", calcul_mgj13);
 
 
 
    var e14 = document.getElementById("analogue_lentes");
	var elem_dose_analogueL = document.getElementById("dose_analogueL");
    var elem_injection_analogueL = document.getElementById("injection_analogueL");
 
	function calcul_mgj14() {
 
		var list_idx = e14.options[e14.selectedIndex].index;
 
		var nb_mg = document.getElementById("dose_analogueL");
        var mg = parseFloat(nb_mg.value);
 
		var elem_dose = document.getElementById("injection_analogueL");
		var dose = parseFloat(elem_dose.value);
 
		var elem_result = document.getElementById("doseT_analogueL");
 
		if (elem_dose.value != ''){
			elem_result.value = parseFloat(mg * dose).toFixed(2);
		}
 
		e15.disabled=(list_idx > 0);
        elem_dose_analogueM.disabled=(list_idx > 0);
        elem_injection_analogueM.disabled=(list_idx > 0);
 
	}
	elem_dose_analogueL.addEventListener("blur", calcul_mgj14);
	elem_injection_analogueL.addEventListener("blur", calcul_mgj14);
 
 
    var e15 = document.getElementById("analogueM");
	var elem_dose_analogueM = document.getElementById("dose_analogueM");
    var elem_injection_analogueM = document.getElementById("injection_analogueM");
 
	function calcul_mgj15() {
 
		var list_idx = e15.options[e15.selectedIndex].index;
 
		var nb_mg = document.getElementById("dose_analogueM");
		var mg = parseFloat(nb_mg.value);
 
		var elem_dose = document.getElementById("injection_analogueM");
		var dose = parseFloat(elem_dose.value);
 
		var elem_result = document.getElementById("dose_autreL");
 
		if (elem_dose.value != ''){
			elem_result.value = parseFloat(mg * dose).toFixed(2);
		}
 
		e13.disabled=(list_idx > 0);
        elem_dose_analogue.disabled=(list_idx > 0);
        elem_injection_analogue.disabled=(list_idx > 0);
        e14.disabled=(list_idx > 0);
        elem_dose_analogueL.disabled=(list_idx > 0);
        elem_injection_analogueL.disabled=(list_idx > 0);
 
	}
	elem_dose_analogueM.addEventListener("blur", calcul_mgj15);
	elem_injection_analogueM.addEventListener("blur", calcul_mgj15);

Ces codes là, permettent de faire ce que j'ai décris au début, sauf que le souci là, c'est qu'il faut choisir une valeur ensuite choisir une valeur de mon champ Dose, et c'est comme ça que ça fasse effet :(
Voilà le lien où je fais mes tests: http://jsfiddle.net/Lroqp7jg/8/

Je vous remercie d'avance

Voici un petit exemple (lise 1 et 3 ) qui passe enable ou disabled la liste 3 en fonction de la liste 1.il y a probablement mieux
J'ai juste ajouté dans la partie du select une valeur (0) pour le défaut
Code:

1 2 <option value="0">choisissez...</option>
Code:

1 2 3 4 5 6 document.getElementById('analogue_rapides').onchange = function(){ var status = true; if(this.options[this.selectedIndex].value==0) { status = false; } document.getElementById('analogueM').disabled = status; }

Merci pour ta réponse ^^

En fait ça marche nikel, sauf que avec le code que j'ai fait en m'inspirant de ta réponse:

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
var e13 = document.getElementById('analogue_rapides').onchange = function(){
	var status = true;
	if(this.options[this.selectedIndex].value==0) { status = false; }
	document.getElementById('analogueM').disabled = status;
  };
	var elem_dose_analogue = document.getElementById("dose_analogue");
    var elem_injection_analogue = document.getElementById("injection_analogue");
 
	function calcul_mgj13() {
 
 
		var list_idx = e13.options[e13.selectedIndex].index;
 
		var nb_mg = document.getElementById("dose_analogue");
		var mg = parseFloat(nb_mg.value);
 
		var elem_dose = document.getElementById("injection_analogue");
		var dose = parseFloat(elem_dose.value);
 
		var elem_result = document.getElementById("doseT_analogue");
 
		if (elem_dose.value != ''){
			elem_result.value = parseFloat(mg * dose).toFixed(2);
		}
 
	}
	elem_dose_analogue.addEventListener("blur", calcul_mgj13);
	elem_injection_analogue.addEventListener("blur", calcul_mgj13);

ne calcule plus la dose et le nombre d'injection :(

essais ça
Code:

1 2 3 document.getElementById("dose_analogue").onblur = function(){ calcul_mgj13();}; document.getElementById("injection_analogue").onblur = function(){ calcul_mgj13();};
cependant il faut contrôler les valeurs des input qui servent aux calculx.

25/08/2014, 14h07
xoftob
ça ne marche pas :(

J'ai remplacé
Code:

1 2 elem_dose_analogue.addEventListener("blur", calcul_mgj13); elem_injection_analogue.addEventListener("blur", calcul_mgj13);
par le bout de code que tu m'as proposé, mais il ne marche toujours pas

Dans ta fonction de calcul il faut ajouter les déclarations e13 et e15

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
 
function calcul_mgj13(){
		var e13 = document.getElementById("analogue_rapides"); // declaration
		var e15 = document.getElementById("analogueM"); // declaration
		var list_idx = e13.options[e13.selectedIndex].index;
 
		var nb_mg = document.getElementById("dose_analogue");
		var mg = parseFloat(nb_mg.value);
 
		var elem_dose = document.getElementById("injection_analogue");
		var dose = parseFloat(elem_dose.value);
 
		var elem_result = document.getElementById("doseT_analogue");
 
		if (elem_dose.value != ''){
			elem_result.value = parseFloat(mg * dose).toFixed(2);
		}
		e15.disabled=(list_idx > 0);
        elem_dose_analogueM.disabled=(list_idx > 0);
        elem_injection_analogueM.disabled=(list_idx > 0);
  }
  document.getElementById('analogue_rapides').onchange = function(){
	var status = true;
	if(this.options[this.selectedIndex].value==0) { status = false; }
	document.getElementById('analogueM').disabled = status;
  }
  document.getElementById("dose_analogue").onblur  = function(){ calcul_mgj13();};
  document.getElementById("injection_analogue").onblur  = function(){ calcul_mgj13();};

25/08/2014, 15h45
xoftob

Oui c'est résolu maintenant, qu'est ce qu'on pourra faire sans de brave gens comme vous :roll:
25/08/2014, 16h05
SPACHFR

Pour allé un peu plus loin tu pourrais essayer d'avoir une fonction de calcul commune pour l'ensemble de ton code .

@+

:D