Selecting multiple from an html select element without using ctrl key

Question

I\'ve come across various solutions to this issue on the net.

Basically, I find having to hold down ctrl a bit cheesy, and I want the select list to just select what

Answer 1

For a pure js solution in chrome set the event listener on "onmouseup" instead. The event that resets the scroll to the first element is fired on the mouse up. So for example:

element.onmouseup = function(event) {
    event.preventDefault();
    var st = this.scrollTop;
    setTimeout(function () { element.scrollTop = st; }, 0);
};

Answer 2

This worked better for me than the other suggestions, because it is vanilla JS and it behaves more similarly to the original still, for example allows quick selection of many items via the shift key.

element.onmousedown = function(event) {
    if (event.shiftKey) return;
    event.preventDefault();
    this.focus();
    var scroll = this.scrollTop;
    event.target.selected = !event.target.selected;
    this.scrollTop = scroll;
    // make sure that other listeners (like Vue) pick up on the change
    // even though we prevented the default.
    this.dispatchEvent(new Event("change"));
}

Answer 3

Short quick version

Created In Process

// this is for specyfic id  -> $('#WOStatusKey').

//below for all multiple select
$('select[multiple]').mousedown(e=>{
e.target.selected = !e.target.selected;
e.stopPropagation();
return false;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="WOStatusKey" name="WOStatusKey">                
        <option value="1">Created</option>
        <option value="2">In Process</option>
        <option value="3">Bla bla bla</option>
    </select>

Answer 4

Here is a pure JS solution:

element.onmousedown= function(event) {
    //this == event.target
    event.preventDefault();
    var scroll_offset= this.parentElement.scrollTop;
    this.selected= !this.selected;
    this.parentElement.scrollTop= scroll_offset;
}
element.onmousemove= function(event) {
    event.preventDefault();
}

Look at the parent element(the select box) and record the vertical scroll offset before selecting/deselecting the option. Then reset it manually once you have performed the action.

The reasoning behind preventing default behavior for the mousemove event is because if you don't prevent it and you happen to click an option while moving the mouse, all options will become de-selected.

Answer 5

Here's a solution that appears to work in Chrome FF and IE. It's not terribly pretty because it flashes a little bit when clicking.

var vals = [];
$("select[multiple]").click(function(e){
        var scroll_offset= this.scrollTop;
      var newVals = $(this).val();
    if (newVals.length === 1) {
        var index = vals.indexOf(newVals[0])
        if (index > -1) {
        vals.splice(index, 1);
      } else {
        vals.push(newVals[0])
      }
      $(this).val(vals);
      this.scrollTop = scroll_offset;
    }
});

jsfiddle

Answer 6

You can save the Element.scrollTop and set it at the end.

$("select").mousedown(function(e){
    e.preventDefault();

    var select = this;
    var scroll = select .scrollTop;

    e.target.selected = !e.target.selected;

    setTimeout(function(){select.scrollTop = scroll;}, 0);

    $(select ).focus();
}).mousemove(function(e){e.preventDefault()});

http://jsfiddle.net/UziTech/cjjg68dr/114/