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 :

Changer dynamiquement la longueur d'un combobox.


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Par défaut Changer dynamiquement la longueur d'un combobox.
    Bonjour, j'ai un formulaire html dans une page JSP qui contient un champ combobox nommé "Type d'erreur" qui se définit en un numéro d'erreur et sa description comme ceci :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <select name="typeErr" id="idTypeErr">
        <option value="1">MOB-001 : Combinaison de type record invalide </option>
        <option value="2">MOB-002 : Statut-evenement invalide</option>
        <option value="3">MOB-003 : Identifiant non trouvé</option>
        <option value="4">MOB-004 : Impossible de trouver le tarif</option>
    </select>
    Le problème est que je manque de place dans mon formulaire et que je n'ai pas l'espace suffisant pour afficher la description complète du type d'erreur.

    Je voudrais donc trouver le moyen de n'afficher que le numéro d'erreur dans le combobox et quand l'usager clique sur le combobox pour choisir un type d'erreur, la description serait associé à chaque numéro de type d'erreur.

    Example en dessin ASCII :

    Appercu avant de cliquer sur le combobox qui a le MOB-001 choisi par défaut:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
                     _________
    Type derreur : |MOB-001|v|
                     ¯¯¯¯¯¯¯¯¯
    Appercu du combobox une fois qu'on a cliquer et que les choix apparaissent en ayant la description qui s'ajoute.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
                     _________
    Type derreur : |MOB-001|v|____________________________________
                    |MOB-001 : Combinaison de type record invalide |
                    |MOB-002 : Statut-evenement invalide           |
                    |MOB-003 : Identifiant non trouvé              |
                    |MOB-004 : Impossible de trouver le tarif      |
                     ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
    Appercu du combobox une fois qu'on a choisi le MOB-004 par exemple.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
                     _________
    Type derreur : |MOB-004|v|
                     ¯¯¯¯¯¯¯¯¯
    Ma première idée fut de changer la taille en mettant style="width:72px", mais la taille ne change pas pour afficher tout le contenu une fois qu'on a cliqué.

    Est-ce que vous avez des idées ?

    Merci !

  2. #2
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Par défaut Second essai manqué...
    D'accord, j'imagine qu'il y a des millers de discussion la dessus, mais depuis ce matin que j'essaie de trouver quelque chose de pertinent et je capitules...

    J'ai essayé moi même de changer la classe du style du combobox pour avoir une "width" différente une fois qu'on a cliqué dessus, mais ca déforme tout ce qui suit le combobox, donc la solution n'est pas idéale...

    Bref, je vous envoi ce que j'ai fait et ca pourrait vous donner une idée.

    Merci !

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <HTML>
      <HEAD>
        <TITLE>Test</TITLE>
            <style>
                .cboShort { 
                    width:80px;
                } 
                .cboLong { 
                    width:330px;
                }                         
            </style>
            <script language="javascript" type="text/javascript">
                function showlong(cboName) {
                 if (document.getElementsByTagName) {                
                            var cbo = document.getElementsByTagName('select');                        
                            if (cbo) {
                                for (var i = 0; i < cbo.length; i++) {                                
                                    if (cbo[i] && cbo[i].style) {                                    
                                        if (cbo[i].id == cboName )
                                        {                                     
                                          cbo[i].className= "cboLong";
                                        }
                                        else
                                        {                                     
                                             cbo[i].className= "cboShort";
                                        }
                                    }
                                }
                            }
                        }
                }
                
                function showshort(cboName) {
                 if (document.getElementsByTagName) {                
                            var cbo = document.getElementsByTagName('select');                        
                            if (cbo) {
                                for (var i = 0; i < cbo.length; i++) {                                
                                    if (cbo[i] && cbo[i].style) {                                    
                                        if (cbo[i].id == cboName )
                                        {                                     
                                          cbo[i].className= "cboShort";
                                        }
                                        else
                                        {                                     
                                             cbo[i].className= "cboLong";
                                        }
                                    }
                                }
                            }
                        }
                }
                
            </script> 
      </HEAD>    
        <BODY>    
            <form method="get">
               Type d'erreur : 
               <select name="champ2" id="combo2" class="cboShort" size="1" onmouseup="showshort('combo2');" onmousedown="showlong('combo2');" >
                   <option value="1">MOB-001 : Combinaison de type record invalide</option>
                   <option value="2">MOB-002 : Statut-evenement invalide</option>
                   <option value="3">MOB-003 : Identifiant non trouvé</option>
                   <option value="4">MOB-004 : Impossible de trouver le tarif</option>
               </select>
               Mais le reste bouge après....
            </form>
         </BODY>
    </HTML>
    Merci encore !

  3. #3
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    Déjà ton titre ne correspond pas à tes attentes.
    Tu parles de dynamisme alors que tu postes dans le forum où il y en a le moins. Ce genre de question est pour le forum JavaScript.

  4. #4
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Par défaut
    Je comprend. C'est qu'au début, je pensais qu'on pouvais arranger ca avec du simple html et du CSS. Mais je tends la perche vers le javascript aussi...

    Merci d'avoir déplacé.

  5. #5
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    hello,

    pour l'avoir déjà fait, je dirais qu'il faut développer sa propre combo (javascript+css)

    une combo, c'est un input (là où apparaît la sélection) + une div (qui s'affiche et se masque, qui contient les choix) + un bouton (qui fait apparaitre la div)

    bon courage

  6. #6
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Par défaut
    Citation Envoyé par bigboomshakala Voir le message
    hello,

    pour l'avoir déjà fait, je dirais qu'il faut développer sa propre combo (javascript+css)

    une combo, c'est un input (là où apparaît la sélection) + une div (qui s'affiche et se masque, qui contient les choix) + un bouton (qui fait apparaitre la div)

    bon courage
    Bonne idée, mais dans mon div, je met quoi pour faire ma liste et déterminer des éléments lequel a été choisi ?

Discussions similaires

  1. Comment changer dynamiquement la valeur d'une option de DbGrid ?
    Par Atrebate62 dans le forum Composants VCL
    Réponses: 4
    Dernier message: 17/03/2005, 13h35
  2. Changer dynamiquement la couleur d'un item d'une listview
    Par little_cypress dans le forum C++Builder
    Réponses: 2
    Dernier message: 29/11/2004, 14h46
  3. [JTextArea]changer dynamiquement le nombre de colonnes
    Par MrDuChnok dans le forum Composants
    Réponses: 9
    Dernier message: 27/04/2004, 13h31
  4. Réponses: 7
    Dernier message: 16/03/2004, 15h59
  5. Changer dynamiquement la position des onglets
    Par ginnovy dans le forum C++Builder
    Réponses: 2
    Dernier message: 11/09/2002, 18h24

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