Bloquer sélection/dé sélection d'un select multiple [Résolu]

[dav2k]

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]

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>

[Bovino]

Code html :

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]

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

[Bovino]

Code :

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

[dav2k]

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

Ça fonctionne pour toi Bovino ?

[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 !

[dav2k]

Ah oui exact!

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

[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 ?

[vermine]

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]

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]

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]

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]

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]

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]

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 (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]

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!

[SpaceFrog]

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

[dav2k]

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