Attribute "Multiple" of <select> tag does not work

Question

Attribute multiple tag <select> does not work, it is only possible to select a single option. I am using 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>

Answer 1

It’s working normally, it turns out the user needs to keep the key Ctrl pressed while selecting items. It also works by holding down the mouse button while passing the cursor over the options. Test:

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

Another solution may be to use a plugin like Multiselect:

---

The question asked in the comments:

I need to create a list where the user can select more than one option, so it would be possible to create a checkbox list with a scroll bar?

That question on Stackoverflow-en quotes a plugin called "Multiselect Widget UI", on that page there are some examples of what it is possible to do with it.

In my opinion it is not even necessary to include a script just to display a 'check'. A simple CSS-only implementation:

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

The great advantage is that customization becomes easier even if you have little knowledge in CSS. To illustrate, an example using two images: and for selected options:

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') }

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

Answer 2

To select more options than the one selected you have to press CTRL, or Apple (Mac), and then click on the option.

If you want to do a kind of effect toggle every click is possible, but the most obvious solution does not work very well. It takes a hack. I also looked in the Soen (here and here) but the solutions that were already there were inconsistent. I left this answer there also.

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

Note: This solution makes it possible to click the options without pressing CTRL, but replaces select in DOM. It is a somewhat adressive method because it will break event headphones if you have any tied to the 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>