Amélioration d'un select pour choix multiple

**PCBleu** · 30/12/2016, 17h43

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 :

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
<!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

**NoSmoking** · 31/12/2016, 10h01

Bonjour,
même si on peut louer ta démarche mais j'ai du mal à comprendre

(...) pour ma part je trouve cela quelque fois bien lourd et nécessitant plusieurs dizaines de koctets de scripte et de css...

Si l'on regarde ce que tu cherches à ajouter à tes fonctionnalités c'est en gros pour cela que les plugins demandent plus de code tout en gardant la même ergonomie que l'existant, ce qui n'est visiblement pas ce que tu cherches à faire (cf#1) !

Pour l'usage de l'<iframe> je n'ai pas bien compris le but !

**PCBleu** · 03/01/2017, 10h11

Bonjour

si cela peut aider , voici une version améliorée -et qui me suffit !!!

Code :

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
<!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

**Watilin** · 03/01/2017, 14h39

Salut et bonne année,

une petite variation autour de ton dernier code, plus propre et plus sale en même temps, juste histoire de donner un point de vue différent.

Code :

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PCBleu 2</title>
  <style>
 
  #x1, #sel, #x2 { width: 250px;
                   display: block; }
  #sel { transition: height 150ms; }
 
  </style>
</head>
<body>
 
<input id="x1">
<select id="sel" size="1" multiple="multiple">
  <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>
<input id="x2">
 
<script>
 
'use strict';
 
var $sel = document.querySelector('#sel');
var initialHeight = getComputedStyle($sel).height;
$sel.style.height = initialHeight;
 
$sel.addEventListener('focus', function selfocused(event) {
  var selobj = event.target;
  var slist = ';' + selobj[0].text + ';';
  var ii = 1;
  var ll = selobj.length;
  for ( ; ii < ll; ii++) {
    selobj[ii].selected =
      (slist.indexOf(';' + selobj[ii].value + ';') != -1);
  }
  selobj.dataset.tag = slist;
  selobj.remove(0);
  selobj.size = 10;
  selobj.style.height = '12em';
}, true);
 
$sel.addEventListener('blur', function selblured(event) {
  var selobj = event.target;
  var ii = selobj.length - 1;
  selobj.options[selobj.options.length] = new Option('void', '');
  for ( ; ii > 0; ii--) {
    selobj[ii].value = selobj[ii - 1].value;
    selobj[ii].innerHTML = selobj[ii - 1].innerHTML;
  }
  selobj[0].value = 'data-tag';
  selobj[0].text = selobj.dataset.tag;
  selobj.selectedIndex = 0;
  selobj.size = 1;
  selobj.style.height = initialHeight;
}, true);
 
$sel.addEventListener('change', function selchanged(event) {
  var selobj = event.target;
  var slisttag = ';' + selobj.dataset.tag + ';';
  var slist = '';
  var ii = 0;
  var ll = selobj.length;
  var flagsel;
  for ( ; ii < ll; ii++) {
    flagsel = selobj[ii].selected;
    if (slisttag.indexOf(';' + selobj[ii].value + ';') != -1) {
      flagsel = !flagsel;
    }
    if (flagsel) {
      if (slist != '') slist += ';';
      slist += selobj[ii].value;
    }
    if (selobj[ii].selected != flagsel) {
      selobj[ii].selected = flagsel;
    }
  }
  selobj.dataset.tag = slist;
  //document.getElementById('x2').value = slist;
});
 
</script>
</body>
</html>