Multiple attribute of tag select does not work

Navigation
2

Attribute multiple of tag <select> does not work, you can only select a single option. I'm 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>
    
asked by anonymous 19.12.2014 / 22:49

2 answers

3

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

If you want to do a toggle type effect every click is possible, however the most obvious solution does not work too much well . It takes a hack . I also looked at SOen ( here and here ) but the solutions that were already there were inconsistent. I left the answer there too.

jsFiddle: link

Note: This solution allows you to click on the options without pressing the CTRL, but overrides the select in the DOM. It is a somewhat adressive method because it will break event droppers if you have any tied to 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>
    
20.12.2014 / 09:08
3

It's working normally, so it happens that the user needs to hold down the ctrl key while selecting the items. It also works by holding down the mouse button while you hover over the options. Take the 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 might be to use some plugin such as MultiSelect :

As for the question asked in the comments:

  

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

This question in StackOverflow-en cites a plugin called " UI MultiSelect Widget ", on this page there are some examples of what you can do with him.

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

/* 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 though you have little knowledge of CSS. To illustrate, an example using two images:

20.12.2014 / 09:05
Remove all tags within a contenteditable Read phpMyAdmin column with multiple records