html - Atributo "multiple" da tag <select> não funciona - Stack Overflow em Português
Atributo multiple da tag <select> não funciona, só é possível selecionar uma única opção. Estou usando o Chrome.
<option value="site-1" />SITE
<option value="site-2" selected />SITE
<option value="site-3" />SITE
<option value="site-4" />SITE
<option value="site-5" />SITE
<option value="site-6" selected />SITE
<option value="site-7" />SITE
<option value="site-8" />SITE
<option value="site-9" />SITE
editada 20/12/14 às 10:03
Testei o código e funcionou. Vc está utilizando o control para selecionar mais de uma opção? – Arthur Menezes 19/12/14 às 21:56
Não sabia que devia utilizar control; Agora que sei, isso levanta uma questão, eu necessito criar uma lista onde o usuario poderá selecionar mais de uma opção, então seria possivel criar uma lista de checkbox com uma barra de rolagem (a lista é bem grande) – Ricardo 19/12/14 às 21:59
Embora o seu HTML funcione, eu ainda sugeriria colocar o texto dentro das tags option, como: <option value="site-2" selected>SITE</option> – sergiopereira 19/12/14 às 23:03
Para selecionar mais opções do que a selecionada tem de pressionar CTRL, ou Apple (Mac), e depois clicar na opção.
Se quiser fazer um efeito tipo toggle a cada clic é possível, porém a solução mais obvia não funciona muito bem. É preciso um hack. Procurei também no SOen (aqui e aqui) mas as soluções que já lá estavam eram inconsistentes. Deixei esta resposta lá também.
Nota: Esta solução possibilita clicar nas opções sem precisar de pressionar no CTRL, mas substitui o select no DOM. É um método algo adressivo pois vai quebrar oscultadores de evento se tiver algum amarrado ao select.
// hack para corrigir comportamento inconsistente
Está funcionando normalmente, acontece que o usuário precisa manter a tecla ctrl pressionada enquanto seleciona os itens. Também funciona mantendo o botão do mouse pressionado enquanto passa o cursor sobre as opções. Faça o teste:
/* somente visualização */
select{border: 2px solid #ccc;width:250px;height:200px}
<select multiple name='sites[]'>
<option value='site-a'>site a</option>
<option value='site-b'>site b</option>
<option value='site-c'>site c</option>
<option value='site-d'>site d</option>
Outra solução pode ser utilizar algum plugin como o MultiSelect:
Quanto a pergunta feita nos comentários:
Eu necessito criar uma lista onde o usuário poderá selecionar mais de uma opção, então seria possível criar uma lista de checkbox com uma barra de rolagem?
Essa pergunta no StackOverflow-en cita um plugin chamado "UI MultiSelect Widget", nessa página há alguns exemplos do que é possível fazer com ele.
Na minha opinião nem é necessário a inclusão de um script só para exibir um 'check'. Uma implementação simples somente com CSS:
option:before { content: "☐ " }
option:checked:before { content: "☑ " }
<option value='site-e'>site e</option>
A grande vantagem é que a personalização se torna mais fácil mesmo tendo pouco conhecimento em CSS. Para ilustrar, um exemplo utilizando duas imagens: e para opções selecionadas:
option:before{ margin-right: 5px;content:url('http://i.stack.imgur.com/SHKSN.png') }
option:checked:before { content: url('http://i.stack.imgur.com/sjCFU.png') }
Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag html html-select multiple ou faça sua própria pergunta.