How can I make an HTML multiple select act like the control button is held down always

Try this out. You can store the option values in an object and use the click action to update the object then apply the changes to the select.

Demo

http://jsfiddle.net/iambriansreed/BSdxE/

HTML

<select class="select-toggle" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>​

JavaScript

$('.select-toggle').each(function(){    
    var select = $(this), values = {};    
    $('option',select).each(function(i, option){
        values[option.value] = option.selected;        
    }).click(function(event){        
        values[this.value] = !values[this.value];
        $('option',select).each(function(i, option){            
            option.selected = values[option.value];        
        });    
    });
});​

You may want to consider a simpler solution, like using a list of checkboxes inside a div whose overflow property is set to scroll. That might work out better for you. Getting a drop down to do what you've asked is a bit involved.

See this for example:

label{display:block;}
    #container{height:100px;width:200px;overflow:scroll;}
<div id="container">
        <label><input type="checkbox" name="test" value="1" />Option 1</label>
        <label><input type="checkbox" name="test" value="2" />Option 2</label>
        <label><input type="checkbox" name="test" value="3" />Option 3</label>
        <label><input type="checkbox" name="test" value="4" />Option 4</label>
        <label><input type="checkbox" name="test" value="5" />Option 5</label>
        <label><input type="checkbox" name="test" value="6" />Option 6</label>
        <label><input type="checkbox" name="test" value="7" />Option 7</label>
        <label><input type="checkbox" name="test" value="8" />Option 8</label>
        <label><input type="checkbox" name="test" value="9" />Option 9</label>
        <label><input type="checkbox" name="test" value="10" />Option 10</label>
        <label><input type="checkbox" name="test" value="11" />Option 11</label>
        <label><input type="checkbox" name="test" value="12" />Option 12</label>
    </div>


Had to solve this problem myself and noticed the bugged behavior a simple interception of the mousedown and setting the attribute would have, so made a override of the select element and it works good.

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

Note: This code does fix buggy behavior by replacing the select element in the DOM. This is a bit agressive and will break event handlers you might have attached to the element.

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 to correct buggy behavior
        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>

Tags:

Javascript

Html

Jquery

Select

Recent Posts