2

Atributo multiple da tag <select> não funciona, só é possível selecionar uma única opção. Estou usando o Chrome.

<h4>From</h4>
    <div>
        <select name="sites-list" size="7" multiple>
            <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
        </select>
    </div>
3
  • Testei o código e funcionou. Vc está utilizando o control para selecionar mais de uma opção? Commented 19/12/2014 à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
    Commented 19/12/2014 às 21:59
  • 1
    Embora o seu HTML funcione, eu ainda sugeriria colocar o texto dentro das tags option, como: <option value="site-2" selected>SITE</option> Commented 19/12/2014 às 23:03

2 Respostas 2

3

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.

jsFiddle: http://jsfiddle.net/51p7ocLw/

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.

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        // hack para corrigir comportamento inconsistente
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}
<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

0
3

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>
</select>

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:

/* somente visualização */
select{border: 2px solid #ccc;width:250px;height:200px}

option:before { content: "☐ " }
option:checked:before { content: "☑ " }
<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>
  <option value='site-e'>site e</option>
</select>

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: !checked e checked para opções selecionadas:

option:before{ margin-right: 5px;content:url('https://i.sstatic.net/SHKSN.png') }
option:checked:before { content: url('https://i.sstatic.net/sjCFU.png') }
<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>
</select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .