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:
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:
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:
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:
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 !
Premier brouillon potable...
@Bigboomshakala : Merci pour les indices et remerci ta copine de ma part :D
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:
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> |
