J'ai une standard Sélectionner plusieurs champs de saisie HTML, par exemple: <select multiple="multiple" size="5" id="mysel" name="countries">
<option value="2">Afghanistan</option>
<option value="4">Aland</option>
</select>
7 Réponses :
Vous avez raison de changer le comportement par défaut de sélectionner plusieurs champs de saisie. Ils ont tendance à contribuer négativement à l'expérience utilisateur, car l'objectif n'est pas clairement transmis et que les utilisateurs peuvent ne pas comprendre comment les utiliser correctement.
Réutiliser une boîte multi-sélection n'est pas non plus non plus. Si vous envisagez d'utiliser Sélectionner plusieurs, vous voudrez peut-être refroidir votre conception. Peut-être que vous pouvez utiliser des cases à cocher à la place?
Voici un article sur le sujet: http://www.ryancramer.com/journal / Entrées / SELECT_MULTIPLE /
Bonjour 2020 Merci pour votre réponse rapide. C'est assez drôle, l'articale que vous avez souligné que j'ai déjà lu (en partie), alors que je suis tombé sur cet article déjà en recherchant une solution à mon problème. Ce serait génial de trouver une solution comme demandé avec le "basculement" du statut. Je pense que cela devrait en quelque sorte être possible mais malheureusement, il n'y a pas de moyen simple d'interroger pour le statut Select / Selection ... merci
Vous pouvez utiliser l'extrait suivant pour atteindre votre effet souhaité dans les anciennes versions de jQuery, où prop () n'était pas disponible:
Bonjour TB, Ohh, merci un million de fois !!!! Super! C'est ce que je voulais réaliser! Merci beaucoup!!
Il serait plus concis de faire Self.Prop ("sélectionné",! $ Self.Prop ("sélectionné")); .
@nilskp considérons également $ self.prop ("sélectionné", fonction (i, vieux) {! old});
Ceci.Selected =! This.Selected est beaucoup plus court et plus rapide.
Probablement une solution à venir avec les nouvelles versions JQuery:
Une autre variante sans jQuery:
Utilisation de jQuery 1.9.1 Le code JavaScript est le suivant:
$("select[multiple] option").mousedown(function () {
var $self = $(this);
if ($self.prop("selected"))
$self.removeAttr("selected");
else
$self.attr("selected", "selected");
return false;
});
Je viens d'essayer cette solution et que la réponse sélectionnée ne fonctionnait pas pour JQuery 1.9.1
La réponse de Oscar a regardé beaucoup mieux, mais elle est des propriétés mixtes avec des attributs et ne fonctionne pas si vous sélectionnez, désélectionnez ensuite, essayez ensuite de sélectionner Encore une fois, car il met la sélection dans un état inutilisable
J'ai trouvé la bonne réponse pour moi était la suivante J'espère que cela aide les autres;)
On dirait que la réponse acceptée a été modifiée Ninja pour copier votre réponse, mais je suppose que je ne sais pas ce que c'était auparavant.
Au moins quelqu'un a aimé ma solution suffisamment pour copier, je suppose;) pitié de l'histoire de la question et des futurs utilisateurs coincés sur PRE 1.9.1 JQuery, THX pour le remarquer @prinCetyke
JavaScript (sans jQuery): Je vois que la plupart des réponses ci-dessus lient l'événement avec l'option au lieu de la sélection. Si mon sélection a 1000 options, il liera 1000 événements, cela affectera-t-il les performances? À cause de cela, je décide également de ne pas lier mon événement dans l'option.