Comment créer une listbox en HTML sans permettre la sélection multiple?

97

Je n'ai pas beaucoup d'expérience en HTML. Je cherche à créer une zone de liste simple, mais l'une des exigences est de REFUSER la sélection multiple. La plupart du code pour les listes de sélection va comme ceci -

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

Mais cela permet une sélection multiple.

Ici , une question similaire a été posée, mais la «meilleure» réponse a été rejetée. Je ne sais donc pas comment cela pourrait être fait autrement. Veuillez aider.

html listbox

— Code bleu
source

5

Pour vous autres nouveaux arrivants, veuillez éviter le site Web susmentionné pour votre propre bien - ils ont un bon référencement, mais c'est à peu près tout. C'est truffé de mauvaises pratiques et habitudes que vous regretterez d'avoir appris plus tard. Utilisez l'API de MDN (Mozilla), dans ce cas developer.mozilla.org/en-US/docs/Web/HTML/Element/select .

— Ben

3

@Steve merci pour l'avertissement. Son commentaire "C'est pourquoi j'ai un travail" est également apparu comme arrogant. Si vous avez un travail, tant mieux. Ceci est un forum de réponses et non de publicités.

— CodeBlue

170

Utilisez simplement l'attribut size:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

Pour clarifier, l'ajout de l'attribut de taille n'a pas supprimé la sélection multiple.

La sélection unique fonctionne car vous avez supprimé l'attribut multiple = "multiple".

L'ajout de l'attribut size = "5" est toujours une bonne idée, cela signifie qu'au moins 5 lignes doivent être affichées. Voir la référence complète ici

— Aaroncatlin
source

2

Voté pour la vérité. De plus, lorsque la question a été publiée précédemment, cette solution n'a peut-être pas été aussi largement prise en charge par tous les navigateurs.

— aaroncatlin

Il a probablement été critiqué car il n'y a rien dans les normes HTML qui oblige le navigateur à le rendre sous forme de liste si l'attribut size est défini. Oui, tous les principaux navigateurs le font actuellement, mais il n'y a aucune garantie qu'ils le feront toujours. De manière réaliste cependant, ce serait un changement radical pour tant de sites Web, aucun navigateur n'est susceptible de le changer.

— Elezar

1

La norme est ouverte à une petite interprétation: "La taille d'affichage d'un élément select est le résultat de l'application des règles d'analyse des entiers non négatifs à la valeur de l' attribut size de l'élément , s'il en a un et son analyse réussit." Bien que cela n'indique pas spécifiquement qu'il doit être affiché sous forme de liste déroulante ou de liste, il serait difficile d'afficher un contrôle déroulant qui affiche plus d'un élément. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

Merci!! Et cela pourrait être dynamique, évidemment, avec Js: D

— Jcc.Sanabrie

56

Supprimez l'attribut multiple = "multiple" et ajoutez SIZE = 6 avec le nombre d'éléments souhaité

vous voudrez peut-être consulter ce site

http://www.htmlcodetutorial.com/forms/_SELECT.html

— pollirrata
source

2

Pour Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

ou

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— Deshani Tharaka
source