Restreindre la sélection de l'option SELECT sans désactiver le champ

Question

J'ai un champ SELECT à sélection multiple dont je ne veux pas que l'utilisateur final puisse modifier la valeur.

Pour des raisons d'interface utilisateur, j'aimerais pouvoir le faire sans utiliser l'attribut désactivé = "true".J'ai essayé d'utiliser onmousedown, onfocus, onclick et de définir chacun pour qu'il soit flou ou renvoie false, mais sans succès.

Est-ce possible ou est-ce que j'essaie de faire l'impossible ?

Answer 1

Je sais que vous avez mentionné que vous ne le vouliez pas, mais je pense en fait qu'en utilisant le disabled l'attribut est une meilleure solution :

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

Si nécessaire, vous pouvez toujours donner le select un class et stylisez-le avec CSS.Cette solution fonctionnera dans tous les navigateurs, quelles que soient les capacités de script.

Answer 2

Pourriez-vous le faire avec un onchange événement?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Answer 3

Votre meilleur pari serait d'échanger les options dans la zone de sélection.Si vous n'avez qu'une seule réponse dans cette case, peu importe qu'elle soit cliquable.

J'essaierais cependant de trouver une autre façon de procéder car il semble que cela provoquerait de la frustration pour un utilisateur.Imaginez ce scénario utilisateur :

1. "Regardez, une boîte de sélection d'options."
2. Cliquez sur
3. "Hmm, pourquoi ça n'a pas marché ?"
4. Cliquez sur
5. Cliquez sur!
6. "Cette stupide chose est cassée, je ne reviendrai jamais ici."

Si vous remplacez la sélection par du texte HTML, cela atteint le même objectif.Il s'agit d'une tâche assez simple pour la plupart des principaux frameworks Javascript.

Answer 4

@Jack & @17 sur 26, bon point mais l'utilisateur final s'attendra à ce que la zone de sélection soit désactivée afin que la confusion ne soit pas un problème.

J'aurais dû expliquer plus clairement pourquoi je ne pouvais pas simplement désactiver le contrôle.

L'application qui l'utilisera devra désactiver la sélection des options et il est obligatoire que le contrôle "verrouillé" conserve toujours l'apparence des contrôles de formulaire normaux.

Answer 5

Essayez ce déclencheur.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Answer 6

Il y a un nouvel ajout récent à CSS3 qui est 95% compatible avec tous les navigateurs actuels sauf Opera Mini, appelé pointer-events.En termes simples, vous pouvez "désactiver" l'action par défaut sur un SELECT ou tout autre élément, et toujours pouvoir y effectuer des événements spécifiques...

Vous pouvez consulter l'article de Chris Coyier à leur sujet sur entrez la description du lien ici.

Est-ce plus proche de ce que vous recherchez...Désolé de ne pouvoir fournir aucun de mes propres exemples de codage...