Griser une liste d�roulante

**xoftob** · 25/08/2014, 11h12

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

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

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

**SPACHFR** · 25/08/2014, 12h19

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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;
  }

**xoftob** · 25/08/2014, 12h43

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 :

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

**SPACHFR** · 25/08/2014, 13h57

essais �a

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**xoftob** · 25/08/2014, 14h07

�a ne marche pas

J'ai remplac�

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**SPACHFR** · 25/08/2014, 15h31

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

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
 
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();};

Griser une liste d�roulante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager