<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»).

html html-select

— simPod
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

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
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
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
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
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
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
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
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
source

Remarque: Cela nécessite le plugin jQuery Chosen: Harvesthq.github.io/chosen

— smolo