Div visible ou hidden / Display none

Version imprimable

Bonjour

Ca fait 3 jours que je cherche et que je change mon code pour faire une chose très simple qui est, un div visible ou non

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div align="center">
              <select name="occ">
                <option onClick="document.getElementById('occautre').style.display=none;"value="">Choisir</option>
                <option value="Occupation simple"  onClick="document.getElementById('occautre').style.display=none;">Occupation simple</option>
                <option value="Occupation double" onClick="document.getElementById('occautre').style.display=none;">Occupation double</option>
                <option value="Occupation double avec enfant" onClick="document.getElementById('occautre').style.display=none;">Occupation double avec enfant</option>
                <option value="Autre" onClick="document.getElementById('occautre').style.display='';">Autre</option>
              </select>
              <div id="occautre" style="display:none" >Précisez
                <input type="text" name="occo" id="occo">
              </div>

Comme vous pouvez remarquer que mon code est très simple...

Le problème est que sur FF tout fonctionne mais sur IE6, IE7 et Safari(windows version) le div ne bouge pas

avez vous une idée, sauf la corde bien sur!!!
:aie:

15/08/2008, 03h35
Sub0

Salut! ;)

Voici toutes les valeurs que peut prendre cette propriété :
http://msdn.microsoft.com/en-us/library/ms530751.aspx
15/08/2008, 08h47
Bovino

Code:

document.getElementById('un_id').style.display='none'

Tu as oublié les '
15/08/2008, 09h53
Sub0

Bonjour Bovino ! ;)

Pendant que j'y pense, j'ai un conseil pour HWICE :

Si tu ne connais pas encore, il existe un outil très pratique pour la mise au point du code JavaScript, c'est la console d'erreurs de FireFox. Elle se trouve dans le menu Outils du navigateur...

Un autre conseil : Utilise un éditeur avec coloration syntaxique si ce n'est pas déjà le cas.

A+
15/08/2008, 12h37
Auteur

IE (et visiblement Safari) ne prend pas en charge l'événement onclick sur les balises <option>. Gère l'événement onchange sur la balise <select>

J'utilise deja Firebug et mon code est fait dans dreamweaver CS3
Code:

1 2 3 <option value="Occupation double avec enfant" onClick="document.getElementById('occautre').style.display='none';" onchange="document.getElementById('occautre').style.display='none';">Occupation double avec enfant</option> <option value="Autre" onClick="document.getElementById('occautre').style.display='';" onchange="document.getElementById('occautre').style.display='';">Autre</option>
Ne fonctionne tjs pas. Je veux juste faire apparaitre un champ texte quand l'utilisateur selectionne Autre

15/08/2008, 15h36
Auteur

je me répète :mrgreen: :

Citation:

Envoyé par Auteur

IE (et visiblement Safari) ne prend pas en charge l'événement onclick sur les balises <option>. Gère l'événement onchange sur la balise <select>

Bovino & Auteur ont raison.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
  function test_value(val){
    var el=document.getElementById('occautre');
    if(val=='Autre') el.style.display='block';else el.style.display='none';
  }
</script>
 
<div align="center">
  <select name="occ" onchange="test_value(this.value);">
    <option value="">Choisir</option>
    <option value="Occupation simple">Occupation simple</option>
    <option value="Occupation double">Occupation double</option>
    <option value="Occupation double avec enfant">Occupation double avec enfant</option>
    <option value="Autre">Autre</option>
  </select>
  <div id="occautre" style="display:none;">Précisez
    <input type="text" name="occo" id="occo"/>
  </div>
</div>

J'ai oublié une chose...
Si Javascript est désactivé, le champs de saisie n'apparaîtra jamais.
Je te conseille plutôt d'utiliser ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div align="center">
  <select name="occ" onchange="test_value(this.value);">
    <option value="">Choisir</option>
    <option value="Occupation simple">Occupation simple</option>
    <option value="Occupation double">Occupation double</option>
    <option value="Occupation double avec enfant">Occupation double avec enfant</option>
    <option value="Autre">Autre</option>
  </select>
  <div id="occautre">Précisez
    <input type="text" name="occo" id="occo"/>
  </div>
</div>
<script type="text/javascript">
  var el=document.getElementById('occautre');
  function test_value(val){
    if(val=='Autre') el.style.display='block';else el.style.display='none';
  }
  el.style.display='none';
</script>

Côté serveur, tu récupères l'option sélectionnée et si il s'agit de "Autre", tu prends en compte la saisie de l'utilisateur.

15/08/2008, 16h47
HWICE

Génial merci bcp Sub0