<SELECT multiple> - como permitir apenas um item selecionado?

134

Eu tenho um <SELECT multiple>campo com várias opções e quero permitir que ele tenha apenas uma opção selecionada ao mesmo tempo, mas o usuário pode manter pressionada a tecla CTRL e selecionar mais itens de uma só vez.

Existe alguma maneira de fazer isso? (Não quero remover 'múltiplo').

html html-select

— simPod
fonte

5

O que? Por quê? Isso precisa de mais explicações.

— Dai

5

Por não usar múltiplos com o seu select? :)

— GordonM 17/03

5

@GordonM sim, totalmente: o PI estava procurando o mesmo hoje, porque eu queria que vários itens fossem exibidos (o que está implícito no multipleatributo) sem realmente poder selecionar vários. Esqueceu que o atributo de fazer isso foi chamado size, então a resposta superior serviu-me bem :)

— Luc

Pessoalmente, tenho um campo múltiplo de seleção, onde tenho quatro opções e quero que três possam ser selecionadas, mas a quarta precisa ficar sozinha se for selecionada, porque entraria em conflito com as outras três (3 opções e um "nenhum ")

— RWolfe 15/10/2015

281

Apenas não faça dele um múltiplo selecionado, mas defina um tamanho, como:

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

Exemplo de trabalho: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
fonte

É possível contar programaticamente o número total de <opção> no atributo de tamanho?

— MyName

@Natasha Você pode obter o valor do campo de tamanho usando jquery :-)

— Vladimir verleg

Tamanho das informações relevantes: colocar o selectinterior de um display: flexcontêiner e fazê flex-grow: 1- selectlo tratará size="3"como uma altura mínima e, em seguida, encaixe a altura de toda a seleção no tamanho máximo possível dentro do contêiner. jsfiddle.net/z1gypahs

— Torxed

25

Se o usuário selecionar apenas uma opção de uma vez, basta remover o "múltiplo" - faça uma seleção normal:

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

Violino

— MacGucky
fonte

9

Por que você não deseja remover o multipleatributo? O objetivo inteiro desse atributo é especificar para o navegador que vários valores podem ser selecionados a partir do selectelemento especificado . Se apenas um único valor for selecionado, remova o atributo e o navegador saberá permitir apenas uma única seleção.

Use as ferramentas que você possui, é para isso que servem.

— David
fonte

1

ah o atributo size também funciona autônomo. não percebeu. graças

— simPod

6

@simPod, porque há momentos em que os clientes precisam ver todas as opções à sua frente, mas podem escolher apenas uma delas. Faz tanto tempo desde que eu escrevi html "real", que tive que procurar no google / bing a resposta ... Oh, graças a Deus pelo StackOverflow alguns dias.

— Richard B

1

Você deseja apenas uma opção por padrão, mas o usuário pode selecionar várias opções pressionando a tecla CTRL. Isto é (já) exatamente como o múltiplo SELECT deve se comportar.

Veja isto: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Você pode esclarecer sua pergunta?

— Cogicero
fonte

Awww agora entendo a pergunta, graças a Marcos Placona. A pergunta inicial não foi bem formulada.

— Cogicero 17/03

Embora eu pessoalmente ache "injusto" a experiência do usuário quando você mostra várias opções de seleção, mas o usuário pode selecionar apenas uma.

— Cogicero 17/03/11

1

depende da situação

— simPod 15/05

1

Eu estou voltando aqui depois de pesquisar no google e mudar de coisa no meu final.

Então, acabei de alterar este exemplo e ele funcionará com o jquery em tempo de execução.

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

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

— Ajay2707
fonte

4

Você está basicamente fazendo o que a resposta aceita está fazendo, mas de uma maneira complicada. Em vez de remover o atributo múltiplo em tempo de execução, você pode removê-lo diretamente no 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>

Esta solução simples permite obter visualmente uma lista de opções, mas poder selecionar apenas uma.

— Ste
fonte

4

Bem-vindo ao SO. Por favor, adicione a descrição detalhada

— Andriy Ivaneyko

1

Eu tive algumas relações com o select \ multi-select, foi isso que fez o truque para mim

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

— Ewan
fonte

0

Tarde para responder, mas pode ajudar outra pessoa, eis como fazê-lo sem remover o atributo 'múltiplo'.

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

— DotNetFullStack
fonte

Nota: Isso requer o plugin jQuery Chosen: harvesthq.github.io/chosen

— smolo