Changer dynamiquement la longueur d'un combobox.

**xodblux** · 01/10/2008, 21h31

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 !

**xodblux** · 01/10/2008, 21h57

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 !

**Kerod** · 01/10/2008, 22h00

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.

**xodblux** · 01/10/2008, 22h17

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é.

**bigboomshakala** · 01/10/2008, 22h37

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

**xodblux** · 01/10/2008, 22h42

Envoyé par bigboomshakala

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 ?

**bigboomshakala** · 01/10/2008, 23h09

une liste UL avec des liens A dans les LI dont href="javascript:todoWhenISelectThisChoice()"

(je sais, je suis un peu avare de détails mais ma cop' va me frapper sur je squatte trop le pc)

**xodblux** · 01/10/2008, 23h21

@Bigboomshakala : Merci pour les indices et remerci ta copine de ma part

Bon, j'ai planché sur une idée en me basant sur le code d'un calendrier que j'ai trouvé pour faire afficher et déafficher un div... alors le code n'est pas propre, mais je suis sur le bon chemin...

J'ai fait apparaitre un div contenant un select avec un SIZE défini, ce qui donne l'air d'une listbox...

La seule chose, c'est que je ne sais pas comment faire pour recueillir le choix et faire disparaitre le div après avoir choisi... mais je vais surement trouver demain quand je serai de retour au boulot...

Merci et voici en attendant du code fonctionnel que j'ai bricolé et qui fait la moitié du travail :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<HTML>
  <HEAD>
    <TITLE>Test</TITLE>
        <style>
            .cboShort { 
                width:80px;
            } 
            .cboLong { 
                width:330px;
            }         
            #dpComboBox {
              display: none;          /* Important, do not change */
              position: absolute;        /* Important, do not change */
              color: black;
              font-size: 10px;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              width: 250px;
              background-color: #eeeeee;
            }
                            
        </style>
        <script language="javascript" type="text/javascript">
            var l = 0;
            var t = 0;
            var dest = null;
            
            function GetCbo() {
              EnsureCalendarExists();
              DestroyCalendar();
                if(arguments[0] == null || arguments[0] == "") {
                    // arguments not defined, so display error and quit
                    alert("ERROR: Destination control required in function call GetDate()");
                    return;
                  } else {
                    // copy argument
                    dest = arguments[0];
                  }
                              
              /* Calendar is displayed beside the destination element.*/  
              setCalendarPosition(dest);
              DrawCalendar();
            }
            
            
            function setCalendarPosition(dest){
                var cElement = dest;    
                var myX = cElement.offsetLeft;
                var myY = cElement.offsetTop;        
                var pElement = cElement.offsetParent;
                //Add the offset position of the current element and the position of all its parents.
                while (pElement != document.body) {
                    myX += pElement.offsetLeft
                    myY += pElement.offsetTop
                    pElement = pElement.offsetParent
                }
                l = myX - 3;
                t = myY + 22;
                
                if(t < 0) t = 0;
            }
            
            function DestroyCalendar() {
              var mycbo = document.getElementById("dpComboBox");
              if(mycbo != null) {
                mycbo.innerHTML = null;
                mycbo.style.display = "none";
              }
              return
            }
            
            function DrawCalendar() {
              DestroyCalendar();
              cbo = document.getElementById("dpComboBox");
              cbo.style.left = l + "px";
              cbo.style.top = t + "px";
              
              var sCbo = "<table><tr><td>" +
                           " <select name=\"champ2\" id=\"combo2\" size=\"4\">" +
                         " <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></td></tr></table>";
              cbo.innerHTML = sCbo; // works in FireFox, opera
              cbo.style.display = "inline";
            }
            
            function EnsureCalendarExists() {
              if(document.getElementById("dpComboBox") == null) {
                var eCalendar = document.createElement("div");
                eCalendar.setAttribute("id", "dpComboBox");
                document.body.appendChild(eCalendar);
              }
            }
                        
            
            
            
        </script> 
  </HEAD>    
    <BODY>    
        <form method="get">
           Type d'erreur : 
           <input type="text" name="champ1" size="7" value="MOB-001" onClick="GetCbo(this);"/>
        </form>
     </BODY>
</HTML>

**bigboomshakala** · 02/10/2008, 00h17

faire disparaitre un div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mondiv.style.display = "none";

que faire sur le clic d'un choix dans la liste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
//un choix c'est :
<li><a href="javascript:maFonction()">mon choix 1</a></li>
 
// l'action sur la sélection
function maFonction()
{
  [ ce que je veux qu'il se passe sur ma sélection ]
}

sinon concernant le code que tu as récupéré, ya plus simple mais bon

là ils utilisent du positionnement absolu, alors qu'on peut faire du relatif et donc pas de calcul de positionnement en javascript (par exemple placer tes éléments dans un div englobant, et les placer relativement à ce div)

**xodblux** · 02/10/2008, 14h54

Je vais jouer avec ca et revenir donner le résultat final nettoyer une fois que ca sera fait.

Merci encore pour les idées.

Changer dynamiquement la longueur d'un combobox.

JavaScript

Discussions similaires

Partager

Partager