Limiter le nombre de choix à une liste multiple

Version imprimable

22/04/2015, 13h56
Fredo8

Limiter le nombre de choix à une liste multiple

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
22/04/2015, 18h54
NoSmoking

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.
23/04/2015, 10h58
Fredo8

Ok merci.

Bonjour,

voici une solution 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 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:

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 :aie:
Il faut donc la renommer.
Par exemple :

Code:

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

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

24/04/2015, 12h29
NoSmoking

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.
24/04/2015, 17h37
Auteur

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]
24/04/2015, 23h02
NoSmoking
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:

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

Code:

oSelect.onclick = selection;

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

Citation:

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

effectivement, pas mal de cas à prendre en compte.

En passant par un div contenant une liste :

Code:

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:

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:

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.

27/04/2015, 08h37
Bovino

Citation:

Envoyé par Auteur

Est-ce que "selection" est une méthode de l'objet window ou un quelconque objet sous IE ?

:arrow: http://lmgtfy.com/?q=msdn+selection. :toutcasse:
27/04/2015, 11h48
Auteur

Citation:

Envoyé par Bovino

:arrow: http://lmgtfy.com/?q=msdn+selection. :toutcasse:

gna gna gna :langue: