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