Page 1 sur 1

ré afficher des données vidés par innerHTML?

Posté : 05 oct. 2012, 08:38
par tryan
Bonjour,

Je ne suis pas un adepte du Javascript alors soyez indulgent svp .

J'essaye de créer une fonction qui me permet de "vider" des "div" à la sélection d'une "option" d'un formulaire sauf celui sélectionné. Mon premier tour de boucle semble fonctionner mais c'est après que je coince. Si j'effectue une seconde sélection, l'ensemble des "div" sont "vidés" même celui de ma sélection. Je ne parviens donc pas à finaliser le code ci-dessous (si cela est possible).
[javascript]
function voirid(id){
//compte le nombre d'options du select
var compte_option = document.getElementById('monselect').length;
alert('Nombre option :' +compte_option);
//numéro de l'option selectionné
var num_option = id;
alert('Id en cours : ' +num_option);
//on boucle sur le nombre d'options du select
for( i = 0; i < compte_option; i++ ){
viderdiv = document.getElementById(i);
//si la variable existe et que l'incrémentation est différent du numéro d'option sélectionné, on vide les div correspondant
if(viderdiv && i != num_option){
viderdiv.innerHTML='';
}
}
}
[/javascript]
<form method="post" id="formulaire">

<select id="monselect" onchange="voirid(this.value);">
<option value="vide">---Selectionner---</option>
<option value="1"> div 1</option>
<option value="2"> div 2</option>
<option value="3"> div 3</option>
<option value="4"> div 4</option>
</select>

</form>

<div id="1" class="cacher">div 1</div>
<div id="2" class="cacher">div 2</div>
<div id="3" class="cacher">div 3</div>
<div id="4" class="cacher">div 4</div>
En gros, il faudrait que mes "div" reviennent à leurs état d'origine (non vidé) lorsqu'une nouvelle sélection est faite.

Merci

Re: ré afficher des données vidés par innerHTML?

Posté : 05 oct. 2012, 15:03
par sadeq
Bonjour, ton raisonnement est absurde. Évidemment si tu vides les divs ils ne peuvent plus garder leurs contenus par la suite. Tu as 2 méthodes pour que les divs ré-affichent à chaque changement de sélection leurs contenus :
  • 1. Utiliser un tableau Javascript dans le quel il faut stocker au préalable le contenu HTML des divs, puis remplir le div qui doit pas être vide à partir de ce tableau.

    2. Au lieu de vider les divs il suffit de les cacher puis ré-afficher à la demande.

Re: ré afficher des données vidés par innerHTML?

Posté : 05 oct. 2012, 16:45
par tryan
Bonjour, ton raisonnement est absurde.
C'est pas gentil :mrgreen: .

Montrer/cacher une suite de div ne me pose pas de problème mais cette méthode ne convient pas pour ce que je souhaite faire.
Mes div doivent contenir des morceaux d'un formulaire qui s'affichent à la sélection de la liste. Le problème, c'est que si l'utilisateur valide une première fois le formulaire puis qu'il décide de changer de sélection dans la liste, les données de la précédente validation reste en mémoire et se cumule lors de la prochaine validation...d'ou l'idée de "vider" les "div" inutiles.

Je vais voir du côté des tableaux, du moins, comprendre comment ça fonctionne :).

Merci de votre réponse.

Re: ré afficher des données vidés par innerHTML?

Posté : 18 oct. 2012, 21:11
par Aureusms
Si tu veux vider quelques chose utilise un "innerHTML" : document.getElementById("textDiv").innerHTML = '';

Re: ré afficher des données vidés par innerHTML?

Posté : 19 oct. 2012, 10:14
par tryan
Ce que je fais dans le code Javascript à la ligne :

Code : Tout sélectionner

viderdiv.innerHTML='';

Re: ré afficher des données vidés par innerHTML?

Posté : 20 oct. 2012, 11:27
par Aureusms
Je te propose autre chose en utilisant jQuery :

Ton script changera en
[javascript]function voirid(id){
$('.cacher').hide();
$('#'+id).show();
}[/javascript]

et rajoutes

Code : Tout sélectionner

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
entre les balises <head> et </head>