Style Display ne marche pas javascript
Résolu
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 :
et voici mon code javascript:
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
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
4 réponses
-
ContributeurHello,
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" -
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 * -
et rien n'y fais, toujours le même résultat, il prend mon alert mais le display il ne le fait pas :s
-
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>
