Limiter le nombre de choix à une liste multiple

**Fredo8** · 22/04/2015, 13h56

Bonjour,

J'ai une liste à choix multiple (<select multiple>).
J'aimerais limiter le nombre maximum de choix (à 3).
Es ce possible ? si oui, comment ?

merci

**NoSmoking** · 22/04/2015, 18h54

Bonjour,
à ma connaissance pas on ne peut encore, peut être dans une version future du HTML, pas limiter le nombre de choix, il va te falloir avoir recours au javascript.

**Fredo8** · 23/04/2015, 10h58

Ok merci.

**Auteur** · 23/04/2015, 23h59

Bonjour,

voici une solution javascript :

Code javascript :

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
var idxArray = [];
function initVar(){	
	var i, e;
	e = document.getElementById("idListe");
	for (i=0; i<e.length; i++){
		idxArray.push(false);
	}
	e.selectedIndex = -1;
}
function selection(obj){
	var i, n, lastIndex;
	n = 0;
	lastIndex = -1;
	for (i=0; i<obj.length; i++){
		if (obj[i].selected != idxArray[i])
			lastIndex = i;
		if (obj[i].selected){	
			idxArray[i]=true;
			n++;
		}
		else
			idxArray[i]=false;
	}
	if (n>3){
		obj[lastIndex].selected = false;
		idxArray[lastIndex] = false;
	}
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<body onload="initVar()">
<select id="idListe" style="width:100px" size="8" multiple="multiple" onchange="selection(this)">
	<option>Choix 1</option>
	<option>Choix 2</option>
	<option>Choix 3</option>
	<option>Choix 4</option>
	<option>Choix 5</option>
	<option>Choix 6</option>
	<option>Choix 7</option>
</select>
</body>

L'idée est la suivante : compter le nombre d'éléments sélectionnés et supprimer de la sélection le dernier élément choisi. Malheureusement, il n'existe pas de fonction javascript qui permette de récupérer l'index de la dernière option cochée. Donc au chargement de la page un tableau idxArray contenant le même nombre d'éléments que la liste est créé et initialisé.
Ensuite, lors de chaque clic dans la liste, on compare le contenu de ce tableau avec les éléments sélectionnés. S'il y a une différence, on tient le dernier index. Reste ensuite à mettre à jour le tableau idxArray et compter le nombre d'éléments sélectionnés. S'il y a plus de 3 éléments, la dernière sélection est annulée.

[edit]
Visiblement IE n'aime pas qu'une fonction javascript s'appelle selection

Il faut donc la renommer.
Par exemple :

Code html :

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

<select id="idListe" style="width:100px" size="8" multiple="multiple" onchange="fctSelect(this)">

Code javascript :

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

1
2
3
function fctSelect(obj){
// suite du code
}

[/edit]

**NoSmoking** · 24/04/2015, 12h29

Attention toutefois le onchange ne fonctionnera pas forcément, il me semble qu'il faut utiliser onclick pour du "crossbrosing", ensuite si la touche MAJ est enfoncé cela ne fonctionne plus car il n'y a pas un dernier mais des derniers.

**Auteur** · 24/04/2015, 17h37

Effectivement ce sont les limitations. Pour la touche MAJ peut-être qu'il y a une possibilité de l'ignorer (ignorer une sélection si appui sur cette touche) ?

Par contre si tu as une réponse concernant le fait que IE n'aime pas qu'une fonction javascript s'appelle "selection". Est-ce que "selection" est une méthode de l'objet window ou un quelconque objet sous IE ?

[edit]
En plus je viens de constater que le script ne fonctionne pas si on laisse le doigt appuyé sur le bouton de la souris tout en sélectionnant les items

La résolution de ce problème est moins facile que je ne l'avais pensé.
[/edit]

**NoSmoking** · 24/04/2015, 23h02

Si tu écris window['selection'](this) IE ne fera pas de confusion et n'ira pas chercher si une méthode selection est attaché à l'élément document. Il y avait le même genre de confusion entre les NAME et les ID avant correction.

Tu peux conserver le nom de ta fonction mais dans ce cas il te faudra passer par une affectation hors HTML (inline), par exemple

Code javascript :

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

1
2
3
4
var oSelect = document.getElementsByTagName('SELECT')[0];
oSelect.onclick = function(){
  selection(this);
}

ou encore

Code javascript :

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

oSelect.onclick = selection;

et en mettant le paramètre obj pointant sur this.

La résolution de ce problème est moins facile que je ne l'avais pensé.

effectivement, pas mal de cas à prendre en compte.

**Auteur** · 25/04/2015, 12h26

En passant par un div contenant une liste :

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
<body onload="initEventList()">
 
<div id="liste">
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
<li>option 6</li>
<li>option 7</li>
<li>option 8</li>
<li>option 9</li>
<li>option 10</li>
<li>option 11</li>
</ul>
</div>
 
</body>

Code css :

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
 
.liColor{
	background-color: #DCCD99;
}
 
#liste li{
	cursor:pointer;
}
 
#liste ul{
	margin:0; 
	padding:0; 
	list-style-type:none;
}
 
#liste{
	width:150px; 
	height: 100px; 
	overflow:auto; 
	border-width:5px; 
	border-style:ridge;
}

Code javascript :

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
var itemArray=[];
 
function initEventList()
{
	var i;
	var opt = document.getElementById("liste").getElementsByTagName("ul")[0].getElementsByTagName("li");
 
	for (i=0; i<opt.length; i++)
	{
		opt[i].o = new Object();
		opt[i].o.htmlObj = opt[i];
		opt[i].o.index = i;
		opt[i].onclick=function(){itemClick(this.o)};  // voir la FAQ javascript (variable de boucle)
		itemArray.push(false);
	}
 
 
}
 
function itemClick(item)
{
	var i, n, lastIndex;
 
	n = 0;
	lastIndex = item.index;
 
	if (item.htmlObj.className == "liColor")
	{
		item.htmlObj.className = "";
		itemArray[item.index] = false;
	}	
	else
	{
		for (i=0; i<itemArray.length; i++)
		{		
			if (itemArray[i])
				n++;
		}
 
		if (n<3)
		{
			item.htmlObj.className = "liColor";
			itemArray[item.index] = true;
		}
	}
}

Testé avec IE 9 (Windows Vista) et FF 37. Après pour récupérer les valeurs effectivement sélectionnées, il faut écrire dans un champ hidden le contenu de itemArray.