[POO] Select avec option

Bonjour à tous, ;)

Je voudrais changer les options d'un formulaire, suivant le choix d'un select

Voici le select en question

Code:

---

1 2	<select name="type" id="type" onchange="affichelivre('divlivre');">

---

Et suivant le choix fait, des options apparaissent, sous forme de div.

Par exemple si on sélectionne "Livre", il devrait apparraitre le div suivant:

Code:

---

1 2 3

<div id="divlivre"> <tr><td>Nombre de pages</td><td><input type="text" name="page"></td></tr> <tr><td> Auteur</td><td><input type="text" name="auteur"></td></tr> <tr><td> Éditeur</td><td><input type="text" name="editeur"></td></tr> </div>

---

... par l'intermédiaire de cette fonction

Code:

---

1 2 3 4 5 6 7 8 9

function affichelivre(div){ var div=document.getElementById(div); var sujet=document.getElementById('type').options[document.getElementById('type').selectedIndex].value; if (sujet=="3") div.style.display= ""; else div.style.display = "none"; }

---

Cela ne fonctionne malheureusement pas...

Merci!

le onchange est effectif lorsque :

• un champ a pris le focus
• sa valeur a changé
• il a perdu le focus

Lorsque tu cliques sur une option, ton select a toujours le focus, donc l'événement n'est pas déclenché...

Même quand il perd le focus, cela ne fonctionne pas...

Sinon, comment peut-on mettre une div qui soit "invisible" dès le chargement du formulaire

Code:

---

div.style.display=sujet=="3"?"block":"none";

---

Si je mets:

Code:

---

1 2 3 4 5

#divlivre{ display:none; visibility:hidden; }

---

Pour cette div:

Code:

---

1 2 3 4 5 6

<div id="divlivre"> <tr><td>Nombre de pages</td><td><input type="text" name="page"></td></tr> <tr><td> Auteur</td><td><input type="text" name="auteur"></td></tr> <tr><td> Éditeur</td><td><input type="text" name="editeur"></td></tr> </div>

---

Cela ne devrait pas cacher la div?

Merci

display:none et visibility:hidden cachent tous les deux la div, la différence est que visibility conserve l'espace d'affichage par défaut et pas display.

EDIT:
Cependant, mettre les deux est redondant et oblige à affecter deux styles pour pouvoir afficher la div, en fonction de ce que tu souhaites, il est préférable d'utiliser l'un ou l'autre...

Citation:

---

visibility:hidden;

---

lol afficher un objet invisible, et on voit ... rien...

Citation:

---

display:none et visibility:hidden cachent tous les deux la div, la différence est que visibility conserve l'espace d'affichage par défaut et pas display.

---

J'ai pourtant mis les deux, et ils s'affiche quand même :lol: Je deviens fou! lol

Code:

---

div.style.display=(sujet=="3")?"block":"none";

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

div.style.display=(sujet=="3")?"block":"none";

---

---

Cela permet de faire quoi exactement? :aie:

si sujet vaut "3", on met le display de l'élément 'div' à block, sinon à none...

Ok! Merci! :king: