Javascript et affichage des div

Résolu/Fermé

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 - 9 mars 2010 à 17:46
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 - 10 mars 2010 à 10:58

Bonjour la communauté,
j'ai un petit soucis : je veux afficher une DIV selon le choix fait dans un SELECT. Mon problème est que seule la DIV 1 (de label "divid1") s'affiche, les autres ne s'affichant pas.
Précision : quand je choisi une DIV, les autres doivent s'effacer (ce qui fonctionne).

Voici un bout de code :

<form>
<select name="liste" style="width: 500px" onChange="visibilite(this);">
<option label="1">Article 1</option>
<option label="2">Article 2</option>
<option label="3">Article 3</option>
</select>
</form>

<div style="text-align: justify; display: none;" id="divid1" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla...
</div>
<br>

<script>
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
if(mesDiv[i].className == "partie")
{
nbDiv++;
}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i;
var targetElement;
var ID;
ID = option.selectedIndex + 1;
//alert(nbDiv);
targetElement = document.getElementById("divid" + ID) ;

for( i = 1 ; i <= nbDiv ; i++)
{
document.getElementById("divid" + i).style.display = "none";
alert(i);
}

targetElement.style.display = "block" ;
alert('end');

}
</script>

Merci d'avance ;)

A voir également:

Javascript et affichage des div
Telecharger javascript - Télécharger - Langages
Div c++ - Télécharger - Langages
Affichage double ecran - Guide
Windows 11 affichage classique - Guide
Moyenne.si.ens #div/0 ✓ - Forum Excel

14 réponses

Réponse 1 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 18:13

Réponse 2 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2010 à 18:23

essayes comme ça:

<form>
<select name="liste" id="liste" style="width: 500px" onChange="visibilite(this);">
<option value=-1>--choisissez --</option>
<option value="1">Article 1</option>
<option value="2">Article 2</option>
<option value="3">Article 3</option>
</select>
</form>

dans option c'est value qu'il faut et pas label
ensuite, il faut une ligne d'option en plus sinon le onChnage ne marchera pas pour article 1 en premier choix

<div style="text-align: justify; display: none;" id="divid1" class="partie">
bla bla... 1
</div>
<br>
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla... 2
</div>
<br>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla... 3
</div>
<br>

<script type="text/javascript">  //il faut préciser le type de script

//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
if(mesDiv[i].className == "partie")
{
nbDiv++;
}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i;
var targetElement;
var ID=document.getElementById('liste').value;
//ID = option.selectedIndex ; 
//alert(nbDiv);
targetElement = document.getElementById("divid" + ID) ;

// si ID=-1 on ne fait rien (premiere ligne -- choisissez --)
if(ID !=-1){
	for( i = 1 ; i <= nbDiv ; i++)
	{
		document.getElementById("divid" + i).style.display = "none";
		alert(i);
	}

	targetElement.style.display = "block" ;
	alert('end');

}
}
</script>

Réponse 3 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 18:33

J'ai fait une série de alert() et apparemment, il n'aime pas cette ligne
var ID=document.getElementById('liste').value;

Rien ne se passe après :s

Réponse 4 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2010 à 18:35

chez moi ça marche mais tu n'as certainement pas mis le id="liste" dans la balise <select

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 18:42

je l'avais oublié, en effet... mais ca ne marche pas mieux... il passe cette ligne maintenant, mais le problème est le même

quand je choisi l'article 1, il me l'affiche... Quand je choisi n'importe quel autre, il efface le 1 (normal) mais n'affiche rien à la place :s

Réponse 6 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2010 à 18:56

as tu aussi modifie label par value dans les <option

Réponse 7 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 18:58

oui c'est fait....
je trouve ca incompréhensible que ca marche pour la div1 et pas pour les autres...
Après une série d'alert, je me rends compte que le targetElement a bien le bon ID

Réponse 8 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2010 à 19:03

Ecoute chez moi ça marche avec le code que je t'ai donné

Réponse 9 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 19:03

Voici le code complet de ma page, peut etre une coquille, mais je ne vois pas ou :s


<h1>Articles</h1><br>


<center><form><select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form></center>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<div style="text-align: justify; display: none;" id="divid<?php echo $donnees['id']; ?>" class="partie">
<h2><center>ARTICLE <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></center></h2>
<?php echo $donnees['texte']; ?>
<!-- <hr width="100%" align="center" size="5" color="#D400B6"> -->

<?php
} // Fin de la boucle qui liste les news
?>
</div>
<br>

<script type="text/javascript">
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
	if(mesDiv[i].className == "partie")
	{
		nbDiv++;
	}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
	var i;
	var targetElement;
	var ID=document.getElementById('liste').value;
	//ID = option.selectedIndex ; 
	//alert('ID = ' + ID);
	targetElement = document.getElementById("divid" + ID) ;

	// si ID=-1 on ne fait rien (premiere ligne -- choisissez --)
	if(ID !=-1)
	{
		for( i = 1 ; i <= nbDiv ; i++)
		{
			document.getElementById("divid" + i).style.display = "none";
		}

		targetElement.style.display = "block" ;
		targetElement.style.visibility = "visible" ;
		alert(targetElement.id);

	}
}

</script>

Réponse 10 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2010 à 19:28

<h1>Articles</h1><br>


<center><form><select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form></center>

<?php
//include "connect.php";  //ERREUR tu ne peux pas mettre deux fois le même include de fichier, donc ça devait arreter le script php et en fait tu n'affichait que ce qui restait dans la precedente requette

$retour = mysql_query("SELECT * FROM article");

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
10 mars 2010 à 00:51

désolé, je n'avais pas vu ton message...
mais mon problème est toujours la... seul la divid1 s'affiche...

Quand je regarde le code source de ma page, toutes les DIV apparaissent bien, correctement disposées et par d'erreur de syntaxe (en tout cas, je n'en vois pas)... je désespère :'(

Réponse 11 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 20:51

Une idée ?

Réponse 12 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 23:23

Réponse 13 / 14

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
10 mars 2010 à 08:56

je ne peux pas essayer ton script puisque je n'ai pas ta table, mais essayes comme ça:

<h1>Articles</h1><br>


<center><form>
<select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");
mysql_close();

while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form>
</center>

<?php
//include "connect.php";
//$retour = mysql_query("SELECT * FROM article");
mysql_data_seek($retour);

while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<div style="text-align: justify; display: none;" id="divid<?php echo $donnees['id']; ?>" class="partie">
<h2><center>ARTICLE <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></center></h2>
<?php echo $donnees['texte']; ?>
<!-- <hr width="100%" align="center" size="5" color="#D400B6"> -->

<?php
} // Fin de la boucle qui liste les news
?>
</div>
<br>

<script type="text/javascript">
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
	if(mesDiv[i].className == "partie")
	{
		nbDiv++;
	}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
	var i;
	var targetElement;
	var ID_select=document.getElementById('liste').value;
	//ID = option.selectedIndex ; 
	//alert('ID = ' + ID);
	targetElement = document.getElementById("divid"+ID_select) ;

	// si ID_select=-1 on ne fait rien (premiere ligne -- choisissez --)
	if(ID_select !=-1)
	{
		for( i = 1 ; i <= nbDiv ; i++)
		{
			document.getElementById("divid" + i).style.display = "none";
		}

		targetElement.style.display = "block" ;
		targetElement.style.visibility = "visible" ;
		alert(targetElement.id);

	}
}

</script>

Réponse 14 / 14

swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
10 mars 2010 à 10:58

D'abord, merci pour votre aide.

J'ai trouvé le problème : mes DIV n'étaient pas clôturées dans mon code original.
Tout marche à la perfection.

Désolé de vous avoir fait perdre votre temps !

Discussions similaires

adele

Javascript Arrondi à 2 chiffres après la virgule

Leboncoin : j'ai un problème d'affichage

java script error in the main process

Les paramètres d'affichage NVIDIA ne sont pas

Discussions similaires

Newsletters