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