Style Display ne marche pas javascript

Résolu/Fermé

angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 - 20 août 2012 à 15:15
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 - 24 août 2012 à 16:12

Bonjour,
j'ai une liste deroulante, puis j'ai un tableau dans lequel j'ai deux parties et en fonction du choix de la liste, je veux rendre visible la div corespondant au choix de l'utilisateur, mais apparement ça marche pas :s
voici un extrait de code :

//debut de tableau 
           <tr>
                <td class="interface_label">Type de document :</td>
                <td style="text-align: left">
                   <select id="choixOption" onchange="Javascript:TestListe();">
						<option value="option1">option 1</option>
						<option value="option2">option 2</option>
					</select>	
                </td>
            </tr>
<div id="partie1" >
				<tr >
					<td  colspan="2">DOCUMENT</td>
					<td></td>
				</tr>
				<tr>				
					<td class="">Nature doc :</td>
					<td style="text-align: left">
						<select name="choixNature1">
						    <option value="">-----------</option>
							<option value="pdf">PDF</option>
							<option value="txt">TXT</option>
							<option value="XLS">XLS</option>
								
						</select>
					</td>
					
				</tr>
				
</div>
		
<div id="partie2">
				<tr>				
				<td class="interface_label" colspan="2">DOCUMENT VEHICULE</td>
					<td></td>
				</tr>
				<tr>
			        //code 									
				</tr>

				<tr>
				 //code
				</tr>

				<tr>
				//code	
				</tr>												
</div>

et voici mon code javascript:

function TestListe()
        {
                var elt = document.getElementById("choixOption");
				var div1 = document.getElementById("partie1");
				var div2 = document.getElementById("partie2");
				
				
                if (elt.value == "option1")
                {	               
				document.getElementById("partie1").style.visibility= 'visible';
				document.getElementById("partie2").style.display= 'none';
						
                }
		
                  if (elt.value == "option2")
                {
					
			document.getElementById("partie1").style.display= 'none';
			document.getElementById("partie2").style.visibility= 'visible';

                }
        }

je pars du principe suivant :
si l'util choisis l'option 1: on affiche la partie 1 et on cache la partie 2 et inversement s'il choisis la 2eme option, seulement apparement mon code ne marche pas :s
pourtant dans ma console d'erreur , ça ne me dit rien , et j'ai mis des alert et il passe bien dans mon code

un grand merci pour votre aide

A voir également:

Style Display ne marche pas javascript
Style word - Guide
Telecharger javascript - Télécharger - Langages
Display fusion - Télécharger - Divers Utilitaires
Photo de profil stylé - Guide
Display driver uninstaller - Télécharger - Nettoyage

4 réponses

Réponse 1 / 4

Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
Modifié par Mihawk le 20/08/2012 à 15:21

Hello,

Pourquoi utiliser un coup display et un coup visibility ?
Utilise plutôt :

document.getElementById("partie1").style.display = "none"; 
document.getElementById("partie2").style.display = "";

Autre question : quelle utilité de déclarer div1 et div2 si tu ne t'en sers pas après ?!

Mihawk
"The Weapon of Choice"

Réponse 2 / 4

angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
20 août 2012 à 16:13

en fait, selon le choix de l'utilisateur, j'affiche les lignes adéquates
exemple:
j'ai mon tableau :
ligne 1
ligne 2
ligne 3
ligne 4

si je sélectionne l'option 1 : j'affiche seulement les ligne 1 et 2 ( d'ou les div qui sépare les 2 premières et 2 dernières lignes )

si je selectionne l'option 2 j'affiche les lignes 3 et 4

j'essaye de reprendre l'idée d'un tabcontrol que j'avais réalisé il y a quelques années en fait *

Réponse 3 / 4

angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
20 août 2012 à 16:19

et rien n'y fais, toujours le même résultat, il prend mon alert mais le display il ne le fait pas :s

Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
20 août 2012 à 16:37

Fais voir ton code avec les alert !

Réponse 4 / 4

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
20 août 2012 à 18:09

ne mélanges pas display et visiblity

//debut de tableau 
           <tr>
                <td class="interface_label">Type de document :</td>
                <td style="text-align: left">
                   <select id="choixOption" onchange="Javascript:TestListe();">
						<option value="option1">option 1</option>
						<option value="option2">option 2</option>
					</select>	
                </td>
            </tr>
<div id="partie1" style="display:none;">
				<tr >
					<td  colspan="2">DOCUMENT</td>
					<td></td>
				</tr>
				<tr>				
					<td class="">Nature doc :</td>
					<td style="text-align: left">
						<select name="choixNature1">
						    <option value="">-----------</option>
							<option value="pdf">PDF</option>
							<option value="txt">TXT</option>
							<option value="XLS">XLS</option>
								
						</select>
					</td>
					
				</tr>
				
</div>
		
<div id="partie2"  style="display:none;">
				<tr>				
				<td class="interface_label" colspan="2">DOCUMENT VEHICULE</td>
					<td></td>
				</tr>
				<tr>
			        //code 									
				</tr>

				<tr>
				 //code
				</tr>

				<tr>
				//code	
				</tr>												
</div>


et voici mon code javascript:
<script type="text/javascript">
function TestListe()
        {
                var elt = document.getElementById("choixOption");
				var div1 = document.getElementById("partie1");
				var div2 = document.getElementById("partie2");
				
				
                if (elt.value == "option1")
                {	               
				document.getElementById("partie1").style.display= 'block';
				document.getElementById("partie2").style.display= 'none';
						
                }
		
                  if (elt.value == "option2")
                {
					
			document.getElementById("partie1").style.display= 'none';
			document.getElementById("partie2").style.display= 'block';

                }
        }

</script>

angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
24 août 2012 à 16:12

ok merci !

Discussions similaires

Connexion Smart TV Edenwood

Connecter iphone sur tv sans fil

Wireless display

Qu'est ce que Nvidia Display Container LS ?

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters