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

Version imprimable

11/02/2011, 11h02
dav2k

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

Bonjour,

Tout est dans le titre! :roll:

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 ?

C'est moche mais tu peux essayer �a :

Code:

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>

Code:

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"... :?

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:

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); }

Code:

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

11/02/2011, 12h38
dav2k

Toujours pas.
En cliquant je peux toujours s�lectionner / d� s�lectionner la s�lection ... :cry:

�a fonctionne pour toi Bovino ?
11/02/2011, 13h26
Bovino

J'avais juste copi� coll� ton code pour le rectifier sans me rendre compte que tu as chang� le onclick par un onchange inopportun ! :aie:
11/02/2011, 16h44
dav2k

Ah oui exact!

Mais en changeant "onchange" par "onclick" �a ne change justement pas grand chose au niveau du r�sultat :D.
11/02/2011, 18h35
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.

Pourquoi ne pas supprimer les options que l'on ne souhaite plus, quitte � les sauvegarder pour les restaurer le cas �ch�ant ?
11/02/2011, 18h42
vermine

Citation:

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... :(
11/02/2011, 18h42
Bovino

Citation:

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...
11/02/2011, 18h54
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
11/02/2011, 19h12
Bovino
Citation:
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
Citation:

Envoy� par Bovino

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

:)

Ca confirme ;)

Ceci dit, pour compl�ter ton id�e

Citation:

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�...
12/02/2011, 09h56
NoSmoking

Citation:

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
13/02/2011, 00h56
dav2k

Citation:

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�... :aie:

En tout cas merci pour vos r�ponses. :ccool:

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

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 :P (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).

14/02/2011, 10h59
dav2k

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! :ccool:
14/02/2011, 11h11
SpaceFrog

Citation:

Le div en z-index n'�tait pas viable dans le sens o� il �tait impossible de scroll down le select...

parceque tu avais plac� le div au dessus de la scrollbar :mrgreen:
14/02/2011, 11h34
dav2k

Ouep possible mais j'ai cr�� mon select de toutes pi�ces du coup j'en fais ce que je veux! :D