11488 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher/cacher des fieldset en fonction du choix dans un sel

Bonjour a tous,

J'avais créer il y a quelque temps un petit script pour afficher/cacher des fieldsets en fonction de leur ID mais celui-ci était beaucoup trop lourd. Je me suis donc lancer dans un script utilisant le show et le hide, ce qui donne ceci:
<!-- Afficher /cacher des sous fieldset -->
		<script type="text/javascript">
		$(document).ready(function() {
			if($("#type_inter option:selected").val() == "1")
			{
				$("#fieldsetaudio").show();
			}
			else if($("#type_inter option:selected").val() == "2")
			{
				$("#fieldsetcorrectif1").show();
				$("#fieldsetcorrectif2").show();
				$("#fieldsetcorrectif3").show();
				$("#fieldsetcorrectif4").show();
			}
			else if($("#type_inter option:selected").val() == "3")
			{
				$("#fieldsetdevis").show();
			}
			else if($("#type_inter option:selected").val() == "4")
			{
				$("#fieldsetinter1").show();
				$("#fieldsetinter2").show();
				$("#fieldsetinter3").show();
			}
			else
			{
				$("#fieldsetaudio").hide();
				$("#fieldsetcorrectif1").hide();
				$("#fieldsetcorrectif2").hide();
				$("#fieldsetcorrectif3").hide();
				$("#fieldsetcorrectif4").hide();
				$("#fieldsetdevis").hide();
				$("#fieldsetinter1").hide();
				$("#fieldsetinter2").hide();
				$("#fieldsetinter3").hide();
			}
		});
		</script>

Voici l'apercu de la conf principale des fieldsets:
<div id="fieldsetaudio">
<div id="fieldsetcorrectif">
	<fieldset id="fieldsetcorrectif1">
	<fieldset id="fieldsetcorrectif2">
	<fieldset id="fieldsetcorrectif3">
	<fieldset id="fieldsetcorrectif4">
<div id="fieldsetdevis">
<div id="fieldsetinter">
	<fieldset id="fieldsetinter1">
	<fieldset id="fieldsetinter2">	
	<fieldset id="fieldsetinter3">


avec un CSS pour les id des différents fieldset:
/* Cacher les Sous Fieldset pour qu'ils s'affichent ensuite en fonction du choix dans le select type-inter */
#fieldsetaudio { display : none;}
#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4 { display : none;}
#fieldsetdevis { display : none;}
#fieldsetinter1, #fieldsetinter2, #fieldsetinter3 { display : none;}


mais ce dernier ne fonctionne pas et je vois pas du tout pourquoi.....chrome ne me détecte aucune erreur.

Est ce que quelqu'un serait résoudre mon ptit soucis?

Merci d'avance

maxredphenix
Modifié par maxredphenix (22 Apr 2012 - 00:52)
Bonjour,

Le problème est que tu n'attache pas tes vérifications à un évènement comme "change". Et donc, lorsque tu modifie ton select, aucun code n'est exécuté.

Met tes conditions en tant que callback:


$('#type_inter select').on('change', function () {
   // tes actions
});


De même, tu pourrais avantageusement remplacé ta liste de if/else par une structure switch.
Salut

Vaxilart ta répondu concernant le problème.

Une petite addition. si tu veux tu pourras substituer ça:
$("#fieldsetaudio").hide();

				$("#fieldsetcorrectif1").hide();

				$("#fieldsetcorrectif2").hide();

				$("#fieldsetcorrectif3").hide();

				$("#fieldsetcorrectif4").hide();


par ça:
$("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").hide()


ça minimise un peu tes lignes, par conséquent un code plus lisible
Merci pour vos réponses,

j'ai apporté les modifications que vous m'avez conseillés. J'ai tenter ceci mais cela ne fonctionne pas (que le code soit placer dans le HEAD ou bien après le code du select):
<!-- Afficher /cacher des sous fieldset -->
<script type="text/javascript">
      $('#type_inter select').on('change', function () {
      switch($('#type_inter option:selected').val()) {
	case 1:
	$("#fieldsetaudio").show();
	break;
	case 2:
	$("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").show()
	break;
	case 3:
	$("#fieldsetdevis").show();
	break;
	case 4:
	$("#fieldsetinter1, #fieldsetinter2, #fieldsetinter3").show()
	break;
	default:
	$("#fieldsetaudio").hide();
	$("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").hide()
	$("#fieldsetdevis").hide();
	$("#fieldsetinter1, #fieldsetinter2, #fieldsetinter3").hide()
	break;
	}
});
</script>


Encore merci

maxredphenix
Modifié par maxredphenix (22 Apr 2012 - 10:26)
Salut

Il va falloir d'abord avoir avoir l'habitude de mettre tes événements dans l'événement Ready de Jquery, qui s'exécute quand le DOM est bien chargé, ce qui t'évitera les problèmes de présence de l'élément sur le DOM, quand ton script est exécuté.
Tu l'as déjà fait la haut, alors ton code doit être similaire à cette structure:
$(document).ready(function() {
$('le_selecteur_de_ton_select_ici').on('change',function(){
//Le traitement à faire
});
});


Cela comme première remarque.
Alors si tu mets ça et le problème persiste toujours, il y a deux hypothèses dans ce cas qui me viennent à l'esprit, supposant bien sur que tu faits bien appel à ton frmwrk Jquery, et je te propose de vérifier ta console pour la présence d'erreurs Javascript:

1)-Ton frmwrk Jquery doit être 1.7.0 ou supérieur (Je crois qu'ils sont arrivé à 1.7.2) pour que tu puisses faire recours à la méthode .on(), si non et si tu insistes de travailler avec une ancienne version, tu pourras faire recours à .change() ou .bind():
$(document).ready(function() {
$('le_selecteur_de_ton_select_ici').bind('change',function(){
//Le traitement à faire
});
});

ou,
$(document).ready(function() {
$('le_selecteur_de_ton_select_ici').change(function(){
//Le traitement à faire
});
});

2)-D'après ton premier code, je crois que le sélecteur de ton select est de '#type_inter' (Il fallait fournir ta définition html pour deviner le sélecteur de ton select), c a d, que ton select a l'id="type_inter". Si non ce sélecteur "#type_inter select", veut dire, le select contenu dans un conteneur qui a l'id="#type_inter", comme dans cette exemple:

<div id="type_inter">
<select>
<option value=""></option>
...
</select>
</div>

Alors si ton select porte l'id "type_inter", dans ce cas tu dois mettre "#type_inter" au lieu de "#type_inter select", si bien sur ta définition de l'élément select est ainsi:


<select id="type_inter">
<option value=""></option>
...
</select>


Conclusion:
-Tu mets ton code dans le ready;
-Tu vérifies ta version de JQuery;
-Tu check aussi ton sélecteur pour savoir si tu as bien mis le bon ou pas.

Bonne courage.
Modifié par unami (22 Apr 2012 - 17:01)
Merci pour ta réponse,

J'avais pas vu que j'avais laisser type_inter select. J'ai bien une version JQuery récente, j'ai pris la derniere pour l'utilisation d'un datepicker.

J'ai donc le code suivant:
<!-- Appel des divers scripts -->
<script type="text/javascript" src="../javascript/menu.js"></script>
<script type="text/javascript" src="../javascript/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="../javascript/jquery-1.8.18.js"></script> 
<script type="text/javascript" src="../javascript/jquery.ui.datepicker-fr.js">
<!-- Appel du css pour le datepicker JQUERY -->
<link type="text/css" rel="stylesheet" href="../css/jquery-ui-1.8.18.custom.css"/>
<link type="text/css" rel="stylesheet" href="../css/jquery.ui.datepicker.css"/>
<!-- Script du Datepicker -->
<script type="text/javascript">
jQuery(document).ready(function()
{
   jQuery("#date_appel").datepicker();
}); 
</script>
<!-- Afficher / Cacher des sous fieldsets -->
<script type="text/javascript">
$(document).ready(function() {
$('#type_inter').on('change', function () {
   switch($('#type_inter option:selected').val()) {
     case 1:
     $("#fieldsetaudio").show();
     break;
     case 2:
     $("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").show()
     break;
     case 3:
     $("#fieldsetdevis").show();
     break;
     case 4:
     $("#fieldsetinter1, #fieldsetinter2, #fieldsetinter3").show()
     break;
     default:
     $("#fieldsetaudio").hide();
     $("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").hide()
     $("#fieldsetdevis").hide();
     $("#fieldsetinter1, #fieldsetinter2, #fieldsetinter3").hide()
     break;
     }
});
});
</script>


<div id="infoglobalegauche">
<span>
<label>Type Inter : </label>
	<select id="type_inter">
	    <option value="0">-- Selectionner un type d'inter --</option> 
	    <option value=1>Assistance Audio</option>
	    <option value=2>Correctif</option>
	    <option value=3>Demande de Devis</option>
	    <option value=4>Demande d'Intervention</option>
	</select>
</span>
</div>

Le div infoglobalegauche me sert à mettre le select à gauche dans fieldset via css.

Mais j'ai toujours rien, est-ce que la façon donc j'ai coder avec une structure SWITCH est correcte? parce que c'est la première fois que je l'utilise j'ai toujours fait avec if/else etc..

Merci
Modifié par maxredphenix (22 Apr 2012 - 17:18)
Bonjour,

Commence alors par vérifier que ta fonction est bien appelée. Comme ceci par exemple :


$('#type_inter').on('change', function () {
  alert('Cette fonction est appelée');
  // etc
Bonjour Vaxilart,

je viens de rentrer ton code et lors de la selection d'un des choix un popup affiche bien "cette fonction est appelée"
Salut

Je crois que je vois d'où provient ton problème, mais fisrt, essaies de mettre des " pour les valeurs de tes values au niveau des option value="ta_valeur_ici"
2 ème remarque: dans ton événement change, le jquery te passe l'élément concerné, par "this", alors au lieu de faire une nouvelle sélection, vaudrait mieux faire recours à $(this) comme ça:
$('#type_inter').on('change', function () {
 switch($(this).val()) {
...

Ma 3 ème remarque est que: l'exemple que je t'ai fourni la haut est pour te dire que tu puisses faire exécuter la méthode hide() pour plusieurs éléments, en mettant leurs selecteur séparés par une virgule, alors tu pourras toujours minimiser tes lignes car je vois une succession d'appel à la méthode hide(), c a d:

$('selecteur_1').hide();
$('selecteur_2').hide();
$('selecteur_3').hide();
...
$('selecteur_n').hide();


pourra bien être remplacé par:
$('selecteur_1, selecteur_2, selecteur_3, ... ,selecteur_n').hide();


Quant à la source de ton problème maintenant, c'est en fait, ton swtich qui l'est, c a d apparemment cette instruction est type sensitive, et pas vraiment puisse que ses évaluation s'appuie sur deux types: String et numeric (Et pas sur le typage vraiment connu).
Alors pour ton cas la valeur récupérée par le .val() est String, et les labels de ton switch sont de type numérique, alors il reconnait pas l'égalité, par conséquent, il exécutera le default.
Ce que je te propose c'est de procéder soit à un formatage de la valeur issue par le .val() pour qu'il soit du type numérique par exemple:
$('#type_inter').on('change', function () {
 switch(parseInt($(this).val(),10)) {
...


Soit tu refaits tes labels pour qu'elles soient des string:

case '1':
...
case '2':
...
default:


J'espère que ça résout ton problème.

Bonne courage
Bonsoir à toutes et à tous,

Voici comment procéder pour ton problème d'affichage des fieldsets !

1) tu utilises un select pour choisir ton option.
A chaque option, tu affiches le fieldset correspondant, et tu masques tous les autres.
J'ai fait en sorte que le nom de l'option soit aussi le nom de l'ID du fielset.

2) au chargement, tu initialises le onchange sur le form, et tu appelles une première fois pour faire apparaitre ton fieldset qui correspond à l'option par défaut !

3) je ne vois pas l'intérêt de faire cela en JQUERY alors que c'est si facile de le faire en Javascript.

Voici le HTML :
<!doctype html>
<html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title>test</title>

<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->

<script src="Script.js" type="text/javascript"></script>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form>
	<select id="choix">
		<option value="field1">Field 1</option>
		<option value="field2">Field 2</option>
		<option value="field3">Field 3</option>
		<option value="field4">Field 4</option>
	</select>

	<fieldset id="field1" class="field">
		<legend align=top> Informations personnelles </legend>
		Nom :     <input name="nom_propre" type="text" tabindex=1>
		Prénom :  <input name="prenom"     type="text" tabindex=2>
		Adresse : <input name="adresse"    type="text" tabindex=3 size=40> 
	</fieldset>

	<fieldset id="field2" class="field">
		<legend align=top> Informations Fiscales </legend>
		Nom :     <input name="nom_propre" type="text" tabindex=1>
		Prénom :  <input name="prenom"     type="text" tabindex=2>
		Adresse : <input name="adresse"    type="text" tabindex=3 size=40> 
	</fieldset>

		<fieldset id="field3" class="field">
		<legend align=top> Informations Administratives </legend>
		Nom :     <input name="nom_propre" type="text" tabindex=1>
		Prénom :  <input name="prenom"     type="text" tabindex=2>
		Adresse : <input name="adresse"    type="text" tabindex=3 size=40> 
	</fieldset>

	<fieldset id="field4" class="field">
		<legend align=top> Informations Juridiques </legend>
		Nom :     <input name="nom_propre" type="text" tabindex=1>
		Prénom :  <input name="prenom"     type="text" tabindex=2>
		Adresse : <input name="adresse"    type="text" tabindex=3 size=40> 
	</fieldset>
</form>
</body>
</html>


Voici le CSS :
#choix {
			margin-bottom		: 50px;
}

#field1 {
			background-color	: red;
			margin-bottom		: 15px;
}

#field2 {
			background-color	: blue;
			margin-bottom		: 15px;
}

#field3 {
			background-color	: yellow;
			margin-bottom		: 15px;
}

#field4 {
			background-color	: green;
			margin-bottom		: 15px;
}


Et voici le JAVASCRIPT :
window.onload = function ()
{
	Show();

	document.getElementById("choix").onchange = function () { Show(); }
}

/*================================*/
/*     Affichage d'un Fielset     */
/*================================*/

function Show ()
{
	/*----------------------------------------*/
	/*     Recherche toutes les ClassName     */
	/*----------------------------------------*/

	var tabl = new Array();
	var node  = document.getElementsByTagName("*");
	
	for (var i=0, j=0; i<node.length; i++)
		if (node[i].className == "field")
			tabl[j++] = node[i];

	/*--------------------------------------*/
	/*     On masque tous les Fieldsets     */
	/*--------------------------------------*/
	
	for (var i=0; i<tabl.length; i++)
		tabl[i].style.display = "none";

	/*---------------------------------*/
	/*     On affiche la sélection     */
	/*---------------------------------*/

	var id1 = document.getElementById("choix");
	var id2 = id1.options[id1.selectedIndex].value;

	document.getElementById(id2).style.display = "block";
}


Cela a été testé sous MSIE 8.0, Firefox 11.0, Chrome 18.0, Safari 5.1.5 et Opera 12.0

Bon courage.
Artémus24.
@+[/i][/i][/i]
Modifié par Artemus24 (23 Apr 2012 - 02:53)
Bonsoir à tous,

Merci unami tes conseils font que cela fonctionne maintenant, j'ai voulu tester d'abord en gardant les value comme d'origine donc j'ai pris la commande:
switch(parseInt($(this).val(),10)) {


Et...... ça marche, par contre lors qu'on choisit une des valeurs exemple : audio (value="1"), si je choisi une autre valeur les fieldsets reste ceux de l'audio, je suis obligé de recharger la page pour re-sélectionner un type.

Sinon merci aussi à toi Artemus24, ce que tu m'as donné comme code je l'ai chercher pas mal de temps parce que c'est ce que j'ai crée à l'origine mais les fieldsets ayant augmenter par type d'inter (ex: correctifs = 4 fieldsets) j'ai du tout recommencer pour trouver un autre code car j'arrivais à afficher qu'un fieldset par sélection de type d'inter. Par contre je l'avais pas tout à fait fait comme toi:

<!-- Regroupement des champs concernant les Accompagnements -->
<fieldset id="fieldsetaudio" style="display: none">
    <legend>Assistance Audio: </legend>
</fieldset>
<fieldset id="fieldsetcorrectif" style="display: none">
    <legend>Correctifs</legend>
</fieldset>
<fieldset id="fieldsetdevis" style="display: none">
    <legend>Demande de Devis</legend>
</fieldset>
<fieldset id="fieldsetinter" style="display: none">
    <legend>Interventions</legend>
</fieldset>



function sousfieldset()
{
	// Demande Intervention - Choix 1 - Assistance Audio
	var a = document.getElementById("fieldsetaudio");
	if (document.form_appel.type_inter.value == 1)
	{
		if (a.style.display == "none")
		a.style.display = "block";
	}
	else
	{
		a.style.display = "none";	
	}
	// Demande Intervention - Choix 2 - Demande de Devis			
	var b = document.getElementById("fieldsetdevis");
	if (document.form_appel.type_inter.value == 2)
	{
		(b.style.display == "none")
		b.style.display = "block";
	}
	else
	{
		b.style.display = "none";	
	}
	// Demande Intervention - Choix 3 - Demande Intervention			
	var c = document.getElementById("fieldsetinter");
	if (document.form_appel.type_inter.value == 3)
	{
		if (c.style.display == "none")
		c.style.display = "block";
	}
	else
	{
		c.style.display = "none";	
	}
}


Encore merci pour votre aide
Salut

Pourrais tu mettre ton nouveau code après modification, ton problème est dû probablement à une mauvaise implémentation au niveau de tes cases. (Le Js et aussi le html).
Et si tu veux tu pourras nous dire quand tu change de l'audio (1), tu choisis quelle autre option pour qu'on puisse avoir le même scénario de départ.
Bonjour maxredphenix,

d'abord, je n'aime pas trop JQUERY car il arrive parfois que l'on doit cohabiter avec des versions différentes et cela cause beaucoup de problèmes Donc j'ai opté pour tout faire en JAVASCRIPT. Et puis, je commence à bien maitriser ce langage, sauf sur les divergences entre navigateurs.

Ma solution est assez simple.

1) pour tous les fieldset, j'ai utiliser className afin de pouvoir les mettre tous en même temps à "display : none;"
Le bout de code au début balaye toutes les balises "getElementsByTagName("*");" en recherchant uniquement ceux ayant pour className = "field".

2) Chaque fielset est associé à une option de la base select par sa valeur.
Exemple : <option value="field1"> et <fieldset id="field1">.

3) lorsque tu changes une option dans le select, cela déclenche un évènement : "onchange" et celui-ci appelle la fonction "Show();"
Je remets tous les fieldset à "display : none;" et celui qui a été sélectionné passe à "display : block;"

C'est pas très compliqué à faire.

Une solution, pour ne pas trop surcharger le code javascript (mais il faut l'adapter en conséquence) serait d'utiliser deux className au lieu d'un className et un id.
De ce fait, le premier className garde sa fonctionnalité pour mettre les "display : none;" et l'autre, du genre <class="field1"> en nombre supérieur à 1, permettrait de passer à "display : block;" toutes les balises ayant <class="filed1">.
Je pense que c'est cette solution que tu recherchais.

Si cela t'intéresse, je peux te faire ce code javascript.

@+
Voila le code:
<!-- Afficher / Cacher des sous fieldsets -->
		<script type="text/javascript">
		$(document).ready(function() {
			$('#type_inter').on('change', function () {
				switch(parseInt($(this).val(),10)) {
				case 1:
				$("#fieldsetaudio1").show();
				break;
				case 2:
				$("#fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4").show()
				break;
				case 3:
				$("#fieldsetdevis1").show();
				break;
				case 4:
				$("#fieldsetinter1, #fieldsetinter2, #fieldsetinter3").show()
				break;
				default:
				$("#fieldsetaudio, fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4, fieldsetdevis, #fieldsetinter1, #fieldsetinter2, #fieldsetinter3").hide();
				break;
				}
			});
		});
		</script>


Les éléments du select:
<span>
<label>Type Inter : </label>
	<select id="type_inter">
		<option value="0">-- Selectionner un type d'inter --</option> 
		<option value="1">Assistance Audio</option>
		<option value="2">Correctif</option>
		<option value="3">Demande de Devis</option>
		<option value="4">Demande d'Intervention</option>
	</select>
</span>


Alors après un ptit test, lorsque je sélectionne assistance audio: affichage fieldset OK, puis si je sélectionne correctif ou autre : Affichage fieldset OK mais en plus du fieldset audio et ainsi de suite si on sélectionne chaque élément à la suite.

Par contre si je sélectionne correctif et qu'ensuite je sélectionne audio: affichage fieldset audio: Non

Il faudrait pas faire une sorte de boucle dans le script?

Merci
Décidément vous êtes super rapide à répondre,

Merci pour ta réponse, c'est vrai que j'ai pas penser au "getElementsByTagName("*")" j'étais tellement sur le nommage de mes fieldset par des id que j'ai pas penser à utiliser les class et comme le getElementsById ne peut prendre qu'un élément à la fois j'ai abandonné.

Je veux bien voir comment tu ferais le code pour tester tout ça et faire la comparaison avec jquery et en plus ça sert toujours pour les gens comme moins qui auront (ou ont déjà Smiley smile ) des problèmes et qui cherchent comment faire

Encore merci de votre aide à tous les 2, c'est vraiment sympa
Bonjour à toutes et à tous,

1) tu changes tes class et tes id dans les balises <fieldset> en mettant, par exemple, <class="field choix1"> ou <class="field choix2"> séparé par un blanc.

La classe "field" est général à tous les fieldset que tu désires impacter.
La classe "choix1" correspond uniquement aux fieldset que tu désires afficher lors de la sélection dans ta balise <select> (je parle bien de l'option).

Bien entendu, tu n'as plus du tout de <id="xxxx"> !

Une remarque : j'ai mis en dure dans le code Javascript le id Choix (celle de la balise select) et la classe field (celle général à toutes les balises fielset).

2) n'oublie pas de modifier en conséquence ta feuille CSS et de changer tes #choix1 (id) en .choix1 (class), mais ça, c'est du détail.

3) voici le code javascript modifié :
window.onload = function ()
{
	Show();

	document.getElementById("choix").onchange = function () { Show(); }
}

/*================================*/
/*     Affichage d'un Fielset     */
/*================================*/

function Show ()
{
	/*----------------------------------------*/
	/*     Recherche toutes les ClassName     */
	/*----------------------------------------*/

	var tab1  = new Array();
	var node1 = document.getElementsByTagName("*");
	
	for (var i=0, j=0; i<node1.length; i++)
		if (node1[i].className.indexOf("field") != -1)
			tab1[j++] = node1[i];

	/*--------------------------------------*/
	/*     On masque tous les Fieldsets     */
	/*--------------------------------------*/
	
	for (var i=0; i<tab1.length; i++)
		tab1[i].style.display = "none";

	/*----------------------------------*/
	/*     On récupère la sélection     */
	/*----------------------------------*/

	var id1 = document.getElementById("choix");
	var id2 = id1.options[id1.selectedIndex].value;

	/*-------------------------------------*/
	/*     On sélectionne les fieldset     */
	/*-------------------------------------*/

	var tab2  = new Array();
	var node2 = document.getElementsByTagName("*");
	
	for (i=0, j=0; i<node2.length; i++)
		if (node2[i].className.indexOf(id2) != -1)
			tab2[j++] = node2[i];
	
	/*---------------------------------------------*/
	/*     On affiche les fielset sélectionnés     */
	/*---------------------------------------------*/
	
	for (i=0; i<tab2.length; i++)
		tab2[i].style.display = "block";
}


J'ai fait les tests chez moi sur tous mes navigateurs et cela fonctionne parfaitement.

P.S. : quelqu'un pourrait-il me dire pourquoi en faisant un copier/coller j'ai cette présentation aussi crade avec le code javascript ? J'ai pourtant mis la bonne balise code="js" !

@+[/i][/i][/i][/i][/i][/i]
Modifié par Artemus24 (23 Apr 2012 - 18:57)
Salut

Je crois que j'ai compris ton souci, en fait je croyais que tu l'avais gérer, mais apparemment ce n'est pas le cas Smiley smile , ta question maintenant est devenu une question de logique, pas une question technique.

En effet avant d'afficher les fieldset que tu souhaites suivant ton algorithme, tu dois d'abord cacher le tout, et tu n'as pas besoin de boucle, dans mon exemple suivant je vais considérer que tes fieldset sont inclus dans un conteneur qui comporte id="filedset_container"

//Avant d'accéder au swtitch
$('#filedset_container fieldset').hide();
//Ou bien de mettre les sélecteurs de tes fieldset comme tu as fait dans default comme ça:
//(Cela bien sur si tes fieldset ne sont pas inclus dans un conteneur id="filedset_container")
$("#fieldsetaudio, fieldsetcorrectif1, #fieldsetcorrectif2, #fieldsetcorrectif3, #fieldsetcorrectif4, fieldsetdevis, #fieldsetinter1, #fieldsetinter2, #fieldsetinter3").hide();
//Après vient le switch et dans les cas tu ne mets que les filedset que tu voudras affichés, car tu les as tous cachés
switch(parseInt($(this).val(),10)) {
//Exmple
case 1:
$('fieldsetdevis, #fieldsetinter1').show();


Bonne courage Smiley smile
Merci à vous 2, les types de codes fonctionnent parfaitement bien et il y à même un léger gain en ms sur celui d'Artemus24 Smiley cligne mais bon c'est pour un webapp sur un site hébergé dans un RZO fibre optique.

Je tiens à vous remercier de votre aide et de vos réponses toujours très rapides.

A bientôt peut être.

Cordialement

maxredphenix
Sujet clos
Aller à