Amélioration d'un select pour choix multiple
Bonjour:)
la sélection classique dans un select lorsque l'option multiple est sélectionnée ne me convient pas !!!
j'imagine que je ne suis pas le seul, en référence au nombre d'exemples existants sous jquery, bootstrap & autres
pour ma part je trouve cela quelque fois bien lourd et nécessitant plusieurs dizaines de koctets de scripte et de css...
j'ai construit cet exemple avec un peu de javascript
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
| <!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function selfocused(selobj){
selobj.size = '10';
}
function selblured(selobj){
selobj.size = '1';
}
function selchanged(selobj){
var slist = '';
var ii;
for (ii=0; ii < selobj.length; ii++)
{
if (selobj[ii].selected)
{
if (slist != '') slist = slist + ';' ;
slist = slist + selobj[ii].value;
}
document.getElementById('x2').value = slist;
}
}
</script>
<input id="x1" style='width:250px'></input><br/>
<select id='sel' onfocus='selfocused(this);' onblur='selblured(this);' onchange='selchanged(this);' size='1' multiple='multiple' style='width:250px'>
<option value="v0">Value 0</option>
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
<option value="v4">Value 4</option>
<option value="v5">Value 5</option>
<option value="v6">Value 6</option>
<option value="v7">Value 7</option>
</select><br/>
<input id="x2" style='width:250px'></input><br/>
</select>
</div>
</body>
</html> |
j'aimerais améliorer les points suivants :
** je pense qu'on peut éviter de forcer le maintien de <ctrl> ou <shift> pour permettre le choix multiple
mon idée est d'ajouter un attribut nommé par exemple "data-tag" pour mémoriser la sélection en cours...
** un grand plus serait de pouvoir afficher un résultat explicite après l'action onblur
** le nec plus ultra serait d'obtenir un comportement similaire à un select à choix simple
ou la liste affichée vient en superposition des autres champs présentés à l'écran
je pense qu'on peut y arriver avec un iframe placé dynamiquement au dessus du select
mais je n'ai pas toutes les réponses à mes questions...
Merci d'avance pour toute idée pour ces sujets:)
Voici une version améliorée
Bonjour ;)
si cela peut aider , voici une version améliorée -et qui me suffit !!!
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
| <!DOCTYPE html>
<html>
<body>
<script>
function selfocused(selobj){
var slist = ';'+selobj[0].text+';';
var ii;
for (ii=1; ii < selobj.length; ii++)
{
selobj[ii].selected = (slist.indexOf(';'+selobj[ii].value+';') !=-1);
}
selobj.setAttribute("tag", slist);
selobj.remove(0);
selobj.size = '10';
}
function selblured(selobj){
var ii;
selobj.options[selobj.options.length] = new Option("void", "");
for (ii=selobj.length-1; ii > 0; ii--)
{
selobj[ii].value = selobj[ii-1].value;
selobj[ii].innerHTML = selobj[ii-1].innerHTML;
}
selobj[0].setAttribute("value", "data-tag");
selobj[0].text = selobj.getAttribute("tag");
selobj.selectedIndex = "0";
selobj.size = '1';
}
function selchanged(selobj){
var slisttag = ';'+selobj.getAttribute("tag")+';';
var slist = ''; var ii; var flagsel;
for (ii=0; ii < selobj.length; ii++)
{
flagsel = selobj[ii].selected;
if (slisttag.indexOf(';'+selobj[ii].value+';') !=-1)
{
flagsel = ! flagsel;
}
if (flagsel)
{
if (slist != '') slist = slist + ';' ;
slist = slist + selobj[ii].value;
}
if (selobj[ii].selected != flagsel)
{
selobj[ii].selected = flagsel;
}
}
selobj.setAttribute("tag", slist);
//document.getElementById('x2').value = slist;
}
</script>
<input id="x1" style='width:250px'></input>
<br/>
<select id='sel' onfocus='selfocused(this);' onblur='selblured(this);' onchange='selchanged(this);' size='1' multiple='multiple' style='width:250px'>
<option value="data-tag">v0;v3;v7</option>
<option value="v0">Value 0</option>
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
<option value="v4">Value 4</option>
<option value="v5">Value 5</option>
<option value="v6">Value 6</option>
<option value="v7">Value 7</option>
</select>
<br/>
<input id="x2" style='width:250px'></input>
</body>
</html> |
en ajoutant une option "data-tag" et un attribut "tag" ...
Meilleurs voeux pour cette nouvelle année
