Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Inhiber fonctionnement standard select

13 réponses
Avatar
Jean Ceugniet
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement normal
d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,
b) garde un aspect normal (non grisé comme sur disabled),
c) déclenche une fonction javascript permettant par exemple l'apparition
d'un bloc,
d) que ça marche cross-browser ?


D'avance merci

10 réponses

1 2
Avatar
SAM
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement normal
d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,


? et comment tu le déroules alors ?

b) garde un aspect normal (non grisé comme sur disabled),


comment ça "grisé" ? où ça ? brouteur ?

c) déclenche une fonction javascript permettant par exemple l'apparition
d'un bloc,


fastoche

d) que ça marche cross-browser ?


c'est cross-browser (sauf vieux brouteur)

D'avance merci


<select size=4
onchange="var k = this.selectedIndex;
if(k==0) alert('choisir autre chose');
else
document.getElementById('info_'+k).style.visibility='visible';">
<option selected='selected'>révéler</option>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
<p id="info_1" style="visibility:hidden">ici commentaire 1</p>
<p id="info_2" style="visibility:hidden">ici commentaire 2</p>
<p id="info_3" style="visibility:hidden">ici commentaire 3</p>

Avatar
Jean Ceugniet
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement
normal d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,


? et comment tu le déroules alors ?


Justement, le but est qu'il ne se déroule pas, mais déclenche
l'apparition du div à la place.


b) garde un aspect normal (non grisé comme sur disabled),


comment ça "grisé" ? où ça ? brouteur ?


L'aspect classique d'un champ de formulaire ayant l'attribut disabled
est "grisé" (sous windows, firefox comme ie).


c) déclenche une fonction javascript permettant par exemple
l'apparition d'un bloc,


fastoche


Mais encore, comment ?


d) que ça marche cross-browser ?


c'est cross-browser (sauf vieux brouteur)

D'avance merci


<select size=4
onchange="var k = this.selectedIndex;
if(k==0) alert('choisir autre chose');
else
document.getElementById('info_'+k).style.visibility='visible';">
<option selected='selected'>révéler</option>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
<p id="info_1" style="visibility:hidden">ici commentaire 1</p>
<p id="info_2" style="visibility:hidden">ici commentaire 2</p>
<p id="info_3" style="visibility:hidden">ici commentaire 3</p>



Avatar
SAM

inhiber le fonctionnement normal d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,


? et comment tu le déroules alors ?


Justement, le but est qu'il ne se déroule pas, mais déclenche
l'apparition du div à la place.


Je me demande si on parle de la même chose ... ?
à la place de quoi ?
Faut bien le dérouler pour atteindre le choix du div à montrer, non ?

Ou bien veux tu qu'en cliquant son premier option ça révèle un div ?
Si oui à quoi servent(serviraient) les autres options ?

b) garde un aspect normal (non grisé comme sur disabled),


comment ça "grisé" ? où ça ? brouteur ?


L'aspect classique d'un champ de formulaire ayant l'attribut disabled
est "grisé" (sous windows, firefox comme ie).


Bon je sais ce qu'est grisé pour un champ disabled
mais les options d'un select ... je vois pas où c'est grisé.
Quand on clique sur l'un d'eux il a son fond qui change car il est
sélectionné. La couleur de ce fond dépend du système (même pas du
brouteur) chez moi il est bleu.
à ma connaissance on ne peut pas modifier cette couleur en JS

c) déclenche une fonction javascript permettant par exemple
l'apparition d'un bloc,


fastoche


Mais encore, comment ?


voir exemple donné.

--
sm



Avatar
Francis Spiesser
Jean Ceugniet a formulé la demande :
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement normal
d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,


? et comment tu le déroules alors ?


Justement, le but est qu'il ne se déroule pas, mais déclenche l'apparition du
div à la place.


Ben tu simules le select avec un textbox et une image de flèche accolée

--
______
Francis (enlever .NIPUBNISOUMIS)
J'ai rencontré Isocèle. Il a une idée pour un nouveau triangle. Woody
Allen



Avatar
SAM
Jean Ceugniet a formulé la demande :
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement
normal d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,


? et comment tu le déroules alors ?


Justement, le but est qu'il ne se déroule pas, mais déclenche
l'apparition du div à la place.


Ben tu simules le select avec un textbox et une image de flèche accolée


Mais c'est quoi ça maintenant un "textbox" ?

N'y a t-il vraiment pas moyen que vous appeliez les choses par leurs noms ?

--
sm




Avatar
SAM
Jean Ceugniet a formulé la demande :

Justement, le but est qu'il ne se déroule pas, mais déclenche
l'apparition du div à la place.


Ben tu simules le select avec un textbox et une image de flèche accolée


On se demande pourquoi il faudrait un champ de texte alors que n'importe
quel élément de liste (LI DT ...) fera l'affaire.


Avatar
Jean Ceugniet
Jean Ceugniet a formulé la demande :

Justement, le but est qu'il ne se déroule pas, mais déclenche
l'apparition du div à la place.


Ben tu simules le select avec un textbox et une image de flèche accolée


On se demande pourquoi il faudrait un champ de texte alors que n'importe
quel élément de liste (LI DT ...) fera l'affaire.




Salut,

a) Je parle bien de cliquer sur le select (et non pas sur ses options)
pour que ça déclenche l'apparition d'un div
b) il ne faut donc pas que le select se déroule
c) le fait de remplacer le select par un élément quel qu'il soit, en
ayant l'aspect, ne me semble pas envisageable, puisque l'aspect d'un
select n'est pas le même dans tous les browsers, et que l'aspect choisi
induirait potentiellement un faux élément select ayant un aspect
différent des vrais.



Avatar
SAM

Salut,

a) Je parle bien de cliquer sur le select (et non pas sur ses options)
pour que ça déclenche l'apparition d'un div


C'est là que je ne comprends pas ce que tu veux dire.
Un select a forcément des options sinon il ne sert à rien.
De cliquer dessus sert à le faire se dérouler (enfin ... chez moi c'est
comme ça et je ne sais le dérouler autrement).
Si on inhibe le clic pour le déroulage, comment fera t-on pour vraiment
le dérouler ?

b) il ne faut donc pas que le select se déroule


Et s'il se déroule quand même (brièvement) ?

En reprenant l'exemple donné et en ne le mettant plus en fixe déroulé,
le clic ouvre et ferme l'ensemble et lance l'alerte.

voici ce que j'arrive à faire :

<select
onclick="var d = document.getElementById('info'),
s = d.style.visibility;
d.style.visibility = s=='visible'? 'hidden' :'visible';">
<option selected='selected'>Vos options</option>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
<span id="info" style="visibility:hidden">Choisir une option pour y
aller</span>

ou :

<p><select
onclick="var d = document.getElementById('inf'),
s = d.style.visibility;
d.style.visibility = s=='visible'? 'hidden' :'visible';
this.blur();">
<option selected='selected'>révéler</option>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
<span id="inf" style="visibility:hidden">Choisir une option pour y
aller</span></p>


--
sm

Avatar
Bruno Desthuilliers
Bonjour,

Est-il possible (et si oui, comment) d'inhiber le fonctionnement normal
d'un select afin que :

a) il ne s'ouvre pas quand on clique dessus,
b) garde un aspect normal (non grisé comme sur disabled),
c) déclenche une fonction javascript permettant par exemple l'apparition
d'un bloc,
d) que ça marche cross-browser ?


Mauvaise solution à ton problème.

La bonne solution (dans le principe, et à la louche):

1. laisser le select pour ceux qui n'ont pas javascript
2. pour les autres, le masquer complètement (par javascript) et le
remplacer par un élémént (div ou span ou autre...) pour afficher la
sélection + un div (masqué par défaut) contenant les éléments à
sélectionner (avec une gestion de l'évènement click mettant à jour le
select et l'élément servant à afficher la selection) + un élément
(image, lien, whatever) avec gestion d'évènement pour afficher le div
contenant les éléments à sélectionner.

C'est à peu de chose près ce que font les widgets "calendrier"
(sélection de date).

Pour ce qui est du "que ça marche cross-browser", commence par une
implémentation basée sur les standards W3C, et ajoute ensuite le code
proprio pour cette immonde bouse d'IE6/7 [1]. Pour les autres, tu peux
aussi bien laisser tomber - ils se débrouilleront avec le select normal
(partant du principe qu'à part cette immonde bouse d'IE, tous les
navigateurs récents soit implémentent à peu près correctement le DOM
soit n'ont pas du tout de support javascript).

[1] ou si tu beaucoups d'autre fonctionnalités javascript à implémenter,
utilise une bibliothèque comme jQuery.

Mes deux centimes...

Avatar
Jean Ceugniet

Salut,

a) Je parle bien de cliquer sur le select (et non pas sur ses options)
pour que ça déclenche l'apparition d'un div


C'est là que je ne comprends pas ce que tu veux dire.
Un select a forcément des options sinon il ne sert à rien.
De cliquer dessus sert à le faire se dérouler (enfin ... chez moi c'est
comme ça et je ne sais le dérouler autrement).
Si on inhibe le clic pour le déroulage, comment fera t-on pour vraiment
le dérouler ?



C'est justement là le truc : c'est "par fonction" un select, qui doit
être remplacé (pour des raisons de créas, d'ergonomie, de ... whatever)
par une liste de checkboxes. Le select n'est donc pas censé s'activer,
il doit simplement avoir l'aspect d'un select (notamment parce qu'il est
entouré d'autres select, et qu'un élément d'autre aspect ferait tâche
dans le paysage).



b) il ne faut donc pas que le select se déroule


Et s'il se déroule quand même (brièvement) ?



Pas bon. Le "clignotement" va perturber l'utilisateur.


1 2