<SELECT multiple> - comment autoriser un seul élément sélectionné?

134

J'ai un <SELECT multiple>champ avec plusieurs options et je veux lui permettre d'avoir une seule option sélectionnée en même temps, mais l'utilisateur peut maintenir la touche CTRL et sélectionner plus d'éléments à la fois.

Y a-t-il un moyen de le faire? (Je ne veux pas supprimer «multiple»).

simPod
la source
5
Quoi? Pourquoi? Cela nécessite plus d'explications.
Dai
5
En n'utilisant pas plusieurs avec votre sélection? :)
GordonM
5
@GordonM ouais totalement: PI recherchait la même chose aujourd'hui parce que je voulais afficher plusieurs éléments (ce qui est implicite avec l' multipleattribut) sans pouvoir en sélectionner plusieurs. J'ai oublié que l'attribut pour faire cela s'appelait size, donc la réponse principale m'a bien servi :)
Luc
J'ai personnellement un champ de sélection multiple dans lequel j'ai quatre options et je veux que trois des options puissent être sélectionnées, mais la quatrième doit être seule si elle est sélectionnée car elle entrerait en conflit avec les trois autres (3 options et un "aucun ")
RWolfe

Réponses:

281

N'en faites pas un multiple de sélection, mais définissez-lui une taille, telle que:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Exemple de travail: https://jsfiddle.net/q2vo8nge/

Marcos Placona
la source
Est-il possible de compter par programme le nombre total de <option> dans l'attribut size?
MyName
@Natasha Vous pouvez obtenir la valeur du champ de taille en utilisant jquery :-)
Vladimir verleg
Informations pertinentes sur la taille: Placer l' selectintérieur d'un display: flexconteneur, et faire flex-grow: 1sur le, selectle traitera size="3"comme une hauteur minimale, puis fixera la hauteur de l'ensemble de la sélection à la taille maximale possible dans votre conteneur. jsfiddle.net/z1gypahs
Torxed
25

Si l'utilisateur ne doit sélectionner qu'une seule option à la fois, supprimez simplement le "multiple" - faites une sélection normale:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

Violon

MacGucky
la source
9

Pourquoi ne souhaitez-vous pas supprimer l' multipleattribut? Le but entier de cet attribut est de spécifier au navigateur que plusieurs valeurs peuvent être sélectionnées à partir duselect élément . Si une seule valeur doit être sélectionnée, supprimez l'attribut et le navigateur saura n'autoriser qu'une seule sélection.

Utilisez les outils dont vous disposez, c'est à cela qu'ils servent.

David
la source
1
ah. l'attribut size fonctionne également de manière autonome. n'a pas remarqué. merci
simPod
6
@simPod le raisonnement étant parce qu'il y a des moments où les clients ont besoin de voir toutes les options devant eux, mais ne peuvent en choisir qu'une. Cela fait si longtemps que j'ai écrit du "vrai" html, que j'ai dû google / bing la réponse ... Oh merci le ciel pour StackOverflow quelques jours.
Richard B
1

Vous ne voulez qu'une seule option par défaut, mais l'utilisateur peut sélectionner plusieurs options en appuyant sur la touche CTRL. C'est (déjà) exactement comment le multiple SELECT est censé se comporter.

Regarde ça: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Pouvez-vous clarifier votre question?

Cogicero
la source
Awww je comprends la question maintenant, grâce à Marcos Placona. La question initiale n'était pas bien formulée.
Cogicero
Bien que je pense personnellement qu'il est "injuste" pour l'expérience de l'utilisateur lorsque vous affichez plusieurs options de sélection, mais que l'utilisateur ne peut en sélectionner qu'une.
Cogicero
1
dépend de la situation
simPod
1

Je viens ici après avoir cherché sur google et changé quelque chose de mon côté.

Je viens donc de changer cet exemple et il fonctionnera avec jquery au moment de l'exécution.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

Ajay2707
la source
4
Vous faites essentiellement ce que fait la réponse acceptée, mais de manière alambiquée. Au lieu de supprimer l'attribut multiple au moment de l'exécution, vous pouvez simplement le supprimer directement dans le HTML. jsfiddle.net/3rkk6m9a
Harry
1
<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

Cette solution simple permet d'obtenir visuellement une liste d'options, mais de ne pouvoir en sélectionner qu'une.

Ste
la source
4
Bienvenue à SO. S'il vous plaît ajouter une description détaillée
Andriy Ivaneyko
1

J'ai eu quelques relations avec le select \ multi-select c'est ce qui a fait l'affaire pour moi

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>
Ewan
la source
0

En retard pour répondre mais peut aider quelqu'un d'autre, voici comment le faire sans supprimer l'attribut «multiple».

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});
DotNetFullStack
la source
Remarque: Cela nécessite le plugin jQuery Chosen: Harvesthq.github.io/chosen
smolo