Bloquer sélection/dé sélection d'un select multiple

**dav2k** · 11/02/2011, 11h02

Bonjour,

Tout est dans le titre!

Je cherche un moyen d'empêcher la sélection / dé sélection des options d'un select multiple sachant que readonly ne fonctionne pas sur un select et que disabled ne me convient pas dans le sens où les options du select ne sont plus lisibles sous Chrome...

Une idée ?

**Loceka** · 11/02/2011, 11h19

C'est moche mais tu peux essayer ça :

Code :

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

1
2
3
4
5
6
7
<select id="monSelect" onchange="this.selectedIndex = monIndex;">
	<option name="a">a</option>
	<option name="b">b</option>
</select>
<script type="text/javascript">
  var monIndex = document.getElementById("monSelect").selectedIndex;
</script>

**Bovino** · 11/02/2011, 11h56

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<select multiple="multiple">
    <option value="1" onclick="return false;" onselectstart="return false;">1</option>
    <option value="2" onclick="return false;" onselectstart="return false;">2</option>
    <option value="3" onclick="return false;" onselectstart="return false;">3</option>
    <option value="4" onclick="return false;" onselectstart="return false;">4</option>
    <option value="5" onclick="return false;" onselectstart="return false;">5</option>
    <option value="6" onclick="return false;" onselectstart="return false;">6</option>
    <option value="7" onclick="return false;" onselectstart="return false;">7</option>
    <option value="8" onclick="return false;" onselectstart="return false;">8</option>
    <option value="9" onclick="return false;" onselectstart="return false;">9</option>
    <option value="10" onclick="return false;" onselectstart="return false;">10</option>
</select>

devrait fonctionner pour tous les navigateurs.

EDIT : Après essai, il faut remplacer "return false" par "this.selected=false"...

**dav2k** · 11/02/2011, 12h16

Merci pour vos réponses !

Et si je génère ces options en JS avec appendChild comment est-ce que je pourrais déclarer le onclick et le onselectstart ?

Ce code n'a pas l'air de fonctionner :

Code :

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

1
2
3
4
5
6
7
8
9
 
while(vals[++i]){ 
		var newOption = window.opener.document.createElement('option'); 
		newOption.innerHTML = vals[i];
		newOption.value = vals[i];
		newOption.onchange = this.selected=false;
		newOption.onselectstart = this.selected=false;
		selectList.appendChild(newOption);
	}

**Bovino** · 11/02/2011, 12h22

Code :

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

1
2
newOption.onchange = function(){this.selected=false;};
newOption.onselectstart = function(){this.selected=false;};

**dav2k** · 11/02/2011, 12h38

Toujours pas.
En cliquant je peux toujours sélectionner / dé sélectionner la sélection ...

Ça fonctionne pour toi Bovino ?

**Bovino** · 11/02/2011, 13h26

J'avais juste copié collé ton code pour le rectifier sans me rendre compte que tu as changé le onclick par un onchange inopportun !

**dav2k** · 11/02/2011, 16h44

Ah oui exact!

Mais en changeant "onchange" par "onclick" ça ne change justement pas grand chose au niveau du résultat

.

**NoSmoking** · 11/02/2011, 18h35

pas sûr que le onclick sur une option soit opérationnel, qui plus est ne serait pas déclenché sur une sélection au clavier.

Pourquoi ne pas supprimer les options que l'on ne souhaite plus, quitte à les sauvegarder pour les restaurer le cas échéant ?

**vermine** · 11/02/2011, 18h42

Envoyé par NoSmoking

pas sûr que le onclick sur une option soit opérationnel

Sur certains navigateurs si, mais apparemment IE fait encore des siennes...

**Bovino** · 11/02/2011, 18h42

Envoyé par NoSmoking

pas sûr que le onclick sur une option soit opérationnel, qui plus est ne serait pas déclenché sur une sélection au clavier.

Si, c'est accepté pour un select multiple... sauf pour IE pour lequel l'alternative onselectstart me semblait adaptée, mais ça ne semble pas être le cas

Mais comme tu le fais remarquer, ça ne gère pas la sélection au clavier...

**NoSmoking** · 11/02/2011, 18h54

je viens de faire un rapide test

FireFox, Opera -> OK
Safari, Chrome -> OK si multiple
IE -> que nenni mon brave

testé sous Wind'eau

**Bovino** · 11/02/2011, 19h12

Envoyé par NoSmoking

je viens de faire un rapide test

FireFox, Opera -> OK
Safari, Chrome -> OK si multiple
IE -> que nenni mon brave

testé sous Wind'eau

Envoyé par Bovino

Si, c'est accepté pour un select multiple... sauf pour IE

Ca confirme

Ceci dit, pour compléter ton idée

Pourquoi ne pas supprimer les options que l'on ne souhaite plus, quitte à les sauvegarder pour les restaurer le cas échéant ?

dav2k, pourquoi vouloir mettre un select si tu ne veux pas d'un select ?

Autant utiliser une liste par exemple à laquelle tu donnerais un style approprié...

**NoSmoking** · 12/02/2011, 09h56

Envoyé par Bovino

dav2k, pourquoi vouloir mettre un select si tu ne veux pas d'un select ?

Autant utiliser une liste par exemple à laquelle tu donnerais un style approprié...

autre solution, c'est l'utilisation d'un drag&drop, au hasard, http://javatwist.imingo.net/dragdrop.htm

**dav2k** · 13/02/2011, 00h56

Envoyé par Bovino

dav2k, pourquoi vouloir mettre un select si tu ne veux pas d'un select ?

Autant utiliser une liste par exemple à laquelle tu donnerais un style approprié...

Le select permet d'organiser le listing d'une série d'options dont le contenu est géré par l'utilisateur via des checkbox présentes dans une fenêtre enfant.
Il fait plus office de témoin qu'autre chose ...

Spaffy m'a donné une bonne idée qui est d'ajouter un div positionné au dessus avec z-index, même si cela n’empêche en rien la modification au clavier ça reste compatible avec tous les browsers pour ce qui est de l'utilisation à la souris...
Je pense que je vais oublier cette balise select et envisager autre chose...

Pour ce qui est du drag and drop c'est bien mais ça prend énormément de place et je me vois pas afficher une 100aine d'options dans mon formulaire sous cette forme là...

En tout cas merci pour vos réponses.

**Loceka** · 14/02/2011, 09h14

Pour ce qui est de la sélection au clavier tu peux simplement rediriger le focus :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
function selectNext(current) {
	var e = current;
	while ((e = e.nextSibling) && e.nodeName != "INPUT") {}
	e.focus();
}
</script>
<input type="text"/>
<select onfocus="selectNext(this);">
	<option>a</option>
	<option>b</option>
<select>
<input type="text"/>

Bon, là j'ai fait un code "sale" en mettant en dur qu'on avait un "INPUT" derrière mais rien ne t'empêche de le faire proprement hein

(genre en énumérant l'ensemble des éléments "focusable" (input, select, button, textarea, à-priori-c'est-tout, ...) et en faisant gaffe de reboucler vers le premier champs au cas où, ou en redirigeant vers un id précis).

**dav2k** · 14/02/2011, 10h59

Ouep je vois ...
Finalement je m'oriente vers un "select" créé avec jQuery.
Le div en z-index n'était pas viable dans le sens où il était impossible de scroll down le select...

Merci quand même!