Javascript et affichage des div

Résolu/Fermé
swoog42 Messages postés 1060 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 1060 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:

14 réponses

Réponse 1 / 14
swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 18:13
UP
0
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>
0
Réponse 3 / 14
swoog42 Messages postés 1060 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
0
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
0

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

Posez votre question
Réponse 5 / 14
swoog42 Messages postés 1060 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
0
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
0
Réponse 7 / 14
swoog42 Messages postés 1060 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
0
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é
0
Réponse 9 / 14
swoog42 Messages postés 1060 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>
0
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");
0
swoog42 Messages postés 1060 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 :'(
0
Réponse 11 / 14
swoog42 Messages postés 1060 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 ?
0
Réponse 12 / 14
swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
9 mars 2010 à 23:23
UP
0
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>
0
Réponse 14 / 14
swoog42 Messages postés 1060 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 !
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses