Onchange et affichage de div
Bonjour,
J'ai un javascript qui affiche ou non un calque :
Code:
1
2
3
4
5
6
7
8
| function hideElement(id,hide) {
var elt = document.getElementById(id);
if (hide) {
elt.style.visibility = "hidden";
} else {
elt.style.visibility = "visible";
}
} |
Dans ma page j'ai un select modedepaiement et j'aimerais qu'en fonction du choix que je fais, il affiche le div ou non.
Code:
1
2
3
4
5
6
7
8
9
| <select name="modepaiement">
<option value="0" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">-- Mode de paiement --</option>
<option value="2" onchange="hideElement('modep1',false);hideElement('modep2',true);hideElement('modep3',true);">Chèque bancaire</option>
<option value="7" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',false);">Chèque vacances et chèque bancaire</option>
<option value="6" onchange="hideElement('modep1',true);hideElement('modep2',false);hideElement('modep3',true);">Chèque vacances et espèce</option>
<option value="1" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Espèce</option>
<option value="5" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Vélocomotion</option>
<option value="3" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Virement</option>
</select> |
Le script marche très bien quand je l'utilise avec un bouton radio et un onclick mais pas avec le select. Pourriez-vous me dire ou se situe mon erreur ?
Je vous remercie par avance.
Besoin d'Eclaircissements
Bonjour à tous,
Je suis en galère avec le même genre de problème et plutôt que de créer un énième sujet neuf sur le sujet, je tente le diable ici :D
Bien sûr, je suis incompétent, mais pas totalement idiot pour autant : j'ai farfouillé les méandres du web et bien évidement testé d'adapter plusieurs solutions trouvées, don celle présentée ici !
Seulement je n'y arrive pas, adapter une chose sans la comprendre ne m'as jamais réussis ^.^'
(La reprendre salement telle quelle ne donne rien également .. Ou alors j'élude un détails sans le vouloir)
Et donc voilà :
Moi aussi je dispose d'une splendide liste de choix qui doit, suivant ce dernier, afficher où masquer un champs d'informations.
Moi aussi, j'y arrive "aisément" sur des Radio mais pas à le réadapter à ma Liste x_x ...
Je n'arrive pas à adapter cette solution à mon formulaire non plus.
A dire vrai, je ne comprends pas vraiment comment fonctionne le script :
Code:
1
2
3
4
5
6
7
8
| function hideElement(id,hide) {
var elt = document.getElementById(id);
if (hide) {
elt.style.visibility = "hidden";
} else {
elt.style.visibility = "visible";
}
} |
Enfin si, je le comprends en partie :
- Il récupère l'ID d'un élément et son statut "hide"
- Si le statut "hide" est ... Remplis (?) : le Cache. Sinon, l'Affiche .. ?
Code:
1
2
3
4
5
6
7
8
9
| <select name="modepaiement" onchange="hideElement( this.value );">
<option value="0">-- Mode de paiement --</option>
<option value="2">Chèque bancaire</option>
<option value="7">Chèque vacances et chèque bancaire</option>
<option value="6">Chèque vacances et espèce</option>
<option value="1">Espèce</option>
<option value="5">Vélocomotion</option>
<option value="3">Virement</option>
</select> |
- Au changement (onChange) d'un choix dans la liste, à sa sélection donc : on appel la fonction en lui donnant tout ce qu'elle à besoin (ID+hide), où l'ID est plutôt la "value", donc le script tourne sur ID=2 pour Chèque, etc ...
Code:
1
2
3
4
5
6
7
| <div id="modep1" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
Numéro de Chèque : <input type="text" name="nbch" value="" size="10">
</div>
<div id="modep2" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
Montant en chèques vacances : <input type="text" name="ancv" value="" size="10">
</div>
[...] |
- Et les DIVs sont invisibles, normalement dépendantes des choix sélectionnés plus haut pour repasser visibles.
Seulement je ne voit pas à quel moment on fait le liens entre la value d'options :
Code:
<option value="2">Chèque bancaire</option>
Et l'ID de div :
Code:
<div id="modep1"....
Et je ne suis vraiment pas certains de comprendre le rôle de l'attribut "hide" dans la fonction JS ..
Si quelqu'un pouvais m'expliquer en détails, je serais sûrement plus à même de réadapter ce code à mes besoins .. ?
Bien sûr, s'il faut je peux joindre mes morceaux de code à moi mais ça deviendrais encore d'avantage une aide perso pompée sur le sujet d'un autre et puis est-ce vraiment si utile dans la mesure où le but recherché est vraiment très similaire .. ?
Merci d'essayer de m'aider, et pardon de relancer un sujet techniquement résolu mais je me dit que c'est peut-être préférable à en créer un nouveau, sachant que pour l'instant je me contente d'en comprendre la solution proposée :)
