Como criar uma caixa de listagem em HTML sem permitir a seleção múltipla?

97

Não tenho muita experiência em HTML. Estou procurando criar uma caixa de listagem simples, mas um dos requisitos é DISALLOW a seleção múltipla. A maior parte do código para caixas de listagem é assim -

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

Mas isso permite a seleção múltipla.

Aqui , uma pergunta semelhante foi feita, mas a "melhor" resposta foi rejeitada. Portanto, não tenho certeza de que outra forma isso poderia ser feito. Por favor ajude.

html listbox

— Código Azul
fonte

5

Para vocês, outros recém-chegados, evitem o site mencionado acima para o seu próprio bem - eles têm um bom SEO, mas é só isso. Está repleto de práticas e hábitos ruins que você lamentará ter aprendido mais tarde. Use a API do MDN (Mozilla), neste caso developer.mozilla.org/en-US/docs/Web/HTML/Element/select .

— Ben,

3

@Steve obrigado pelo aviso. Seu comentário "É por isso que tenho um emprego" também foi soado como arrogante. Se você tem um emprego, bom para você. Este é um fórum para respostas e não anúncios.

— CodeBlue

170

Basta usar o atributo de tamanho:

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

Para esclarecer, adicionar o atributo de tamanho não removeu a seleção múltipla.

A seleção única funciona porque você removeu o atributo multiple = "multiple".

Adicionar o atributo size = "5" ainda é uma boa ideia, significa que pelo menos 5 linhas devem ser exibidas. Veja a referência completa aqui

— Aaroncatlin
fonte

2

Votos positivos pela verdade. Além disso, quando a pergunta foi postada anteriormente, esta solução pode não ter sido amplamente suportada por todos os navegadores.

— aaroncatlin

Provavelmente foi rejeitado porque não há nada nos padrões HTML que exija que o navegador o renderize como uma caixa de listagem se o atributo de tamanho estiver definido. Sim, todos os principais navegadores o fazem atualmente, mas não há garantia de que sempre farão. Porém, realisticamente, esta seria uma mudança significativa para tantos sites, nenhum navegador é capaz de alterá-la.

— Elezar

1

O padrão está aberto a uma pequena interpretação: "O tamanho de exibição de um elemento selecionado é o resultado da aplicação das regras para analisar inteiros não negativos ao valor do atributo size do elemento , se houver um e a análise for bem-sucedida." Embora isso não indique especificamente que deve ser exibido como uma lista suspensa ou caixa de listagem, seria difícil exibir um controle suspenso que mostrasse mais de 1 elemento. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

Obrigado!! E isso poderia ser dinâmico, obviamente, com Js: D

— Jcc.Sanabria

56

Remova o atributo multiple = "multiple" e adicione SIZE = 6 com o número de elementos que você deseja

você pode querer verificar este site

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

— Pollirrata
fonte

2

Para 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
fonte