IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[POO] Select avec option


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre confirm�
    Homme Profil pro
    Inscrit en
    F�vrier 2006
    Messages
    217
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : F�vrier 2006
    Messages : 217
    Par d�faut [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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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!

  2. #2
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    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�...
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirm�
    Homme Profil pro
    Inscrit en
    F�vrier 2006
    Messages
    217
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : F�vrier 2006
    Messages : 217
    Par d�faut
    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

  4. #4
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    div.style.display=sujet=="3"?"block":"none";
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirm�
    Homme Profil pro
    Inscrit en
    F�vrier 2006
    Messages
    217
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : F�vrier 2006
    Messages : 217
    Par d�faut
    Si je mets:

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
     
    #divlivre{
    display:none;
    visibility:hidden;
    }
    Pour cette div:
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    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

  6. #6
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    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...
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  7. #7
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    D�tails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par d�faut
    visibility:hidden;
    lol afficher un objet invisible, et on voit ... rien...

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. R�ponses: 8
    Dernier message: 20/08/2014, 09h48
  2. Changer font-size sur un select avec options
    Par dark0502 dans le forum Mise en page CSS
    R�ponses: 5
    Dernier message: 09/10/2013, 00h28
  3. R�ponses: 3
    Dernier message: 04/05/2011, 11h05
  4. R�cup�ration d'un select avec option multiple
    Par Xenonmax dans le forum Langage
    R�ponses: 3
    Dernier message: 23/03/2011, 14h14
  5. modifier option select avec tableau
    Par calitom dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 29/11/2006, 12h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo