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]

Limiter le nombre de choix à une liste multiple

HTML

Vue hybride

Discussions similaires

Partager

Partager