Discussion :

[geeka]

Bonjour,
J'ai un contrôle à faire sur un champ qui se nomme 'etat' si 'etat'== décédée, alors j'affiche un autre champ qui se nomme 'sépulture'. Il y a un petit problème c'est que le champ se cache bien mais les petites flèches de la liste s'affichent.
Voici un aperçu des champs du formulaire :

Code : (formulaire)

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
<div class="row">				
	<section class="col col-6">
		<label class="select">
			<select id="etat" name="etat">
				<option value="">Etat</option>
				<option value="EVIV">Vivante</option>
				<option value="EDCD">Décédée</option>
				<option value="ENSP">Ne sait pas</option>
			</select>
			<i></i>
		</label>
	</section>
	<section class="col col-6">
		<label class="select">
			<select id="sepulture" name="sepulture">
				<option value="">Statut sépulture si décédée</option>
				<option value="EVIV">Mort pour la France</option>
				<option value="EDCD">Sépulture de guerre</option>
				<option value="ENSP">Sépulture communne</option>
				<option value="ENSP">Sépulture classique</option>
			</select>
			<i></i>
		</label>
	</section>
</div>

J'ai une 2ème question : A quoi sert la balise <i> dans ce code ? Je vois que quand je les enlève, je n'ai plus les petites flèches, mais sur internet j'ai trouvé que c'était juste une balise qui rend le texte italique, mais le texte n'est pas en italique, je ne comprend pas.

Merci

[sabotage]

Tu dois avoir du Javascript et du CSS derrière tout ça.
Il faut nous montrer le code en question.

[headmax]

Comme dit Sabotage, tu dois avoir du CSS sur ton element <i>.

Pour faire disparaitre ton image, il faut soit faire un display:none de ton element ce qui me parait le plus simple.

En JS

Code :

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

1
2
3
...
document.getElementsByTagName('i').style.display = "none";
...

En jquery

Code :

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

1
2
3
...
$('i').css({'display':'none'});
...

gl

[Bovino]

En JS

Code :

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

document.getElementsByTagName('i').style.display = "none";

Comme le "s" de "Elements" l'indique, getElementsByTagName() renvoie une collection, tu ne peux donc pas lui appliquer de style, il faut le faire individuellement sur chaque élément de la collection.

[geeka]

Merci pour vos réponses!
J'ai compris pourquoi ça ne marchait pas. Dans mon formulaire j'ai mis un id="sepulture" dans la partie select, et la balise <i> n'était pas à l'intérieur, alors la solution est de mettre un id qui va aussi renfermer la balise <i>.
Il me reste donc une seule question : à quoi sert la balise <i> ?

Voici le code JavaScript pour les contrôles :

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
$(window).load(function () {
    $(document).ready(function () {
	$('#statut').hide();
	$('#sepulture').hide();
	$('#contexte').on('change', function() {
		if($(this).val() === 'WWII') {
			$('#statut').show();
		} else {
			$('#statut').hide();
		}
	});
	$('#etat').on('change', function() {
		if($(this).val() === 'EDCD') {
			$('#sepulture').show();
		} else {
			$('#sepulture').hide();
		}
	});
    });
});

Pour le code CSS, j'en ai plusieurs dont celui-ci :

Code css :

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
/**/
/* normal state */
/**/
.sky-form .toggle i:before {
	background-color: #cc3d3d;	
}
.sky-form .button {
	background-color: #cc3d3d;
}
 
/**/
/* hover state */
/**/
.sky-form .input:hover input,
.sky-form .select:hover select,
.sky-form .textarea:hover textarea,
.sky-form .radio:hover i,
.sky-form .checkbox:hover i,
.sky-form .toggle:hover i,
.sky-form .ui-slider-handle:hover {
	border-color: #dc9596;
}
.sky-form .rating input + label:hover,
.sky-form .rating input + label:hover ~ label {
	color: #cc3d3d;
}
 
/**/
/* focus state */
/**/
.sky-form .input input:focus,
.sky-form .select select:focus,
.sky-form .textarea textarea:focus,
.sky-form .radio input:focus + i,
.sky-form .checkbox input:focus + i,
.sky-form .toggle input:focus + i {
	border-color: #cc3d3d;
}
 
/**/
/* checked state */
/**/
.sky-form .radio input + i:after {
	background-color: #cc3d3d;	
}
.sky-form .checkbox input + i:after {
	color: #cc3d3d;
}
.sky-form .radio input:checked + i,
.sky-form .checkbox input:checked + i,
.sky-form .toggle input:checked + i {
	border-color: #cc3d3d;	
}
.sky-form .rating input:checked ~ label {
	color: #cc3d3d;	
}

[-Rpass-]

Bonjour, la balise i à l'origine est juste une balise html qui permet de mettre du texte en italique, de la même façon que la balise <b> met le texte en gras

[headmax]

Comme le "s" de "Elements" l'indique, getElementsByTagName() renvoie une collection, tu ne peux donc pas lui appliquer de style, il faut le faire individuellement sur chaque élément de la collection.

Effectivement j'ai écris sans tester... Par contre j'ai volontairement utilisé byTagName car je sais pas s'il était dans un contexte plusieurs <i> (plusieurs select)

Et individuellement <i>:

Code :

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

1
2
3
 
var i = document.getElementsByTagName('i');
i[0].style.display = "none"; //si un <i> sinon passer par une boucle

[geeka]

Merci à tous, je pense que tout est résolu