Selecting multiple from an html select element without using the ctrl key

Question

I have come across various solutions to this problem online.

Basically, I have to keep ctrl a little cheesy, and I want the selection list to just select everything I click on and add it to the currently selected items.

I already have this code:

$("select[multiple] option").mousedown(function () { var $self = $(this); if ($self.attr("selected")) { $self.removeAttr("selected", ""); } else { $self.attr("selected", "selected"); } return false; }); 

Element

  <select multiple id="WOStatusKey" name="WOStatusKey"> <option value="1">Created</option> <option value="2">In Process</option> <!-- etc. (about 20 of these) --> </select> 

It works great with one exception: at any time, something is selected / canceled that is not at the top of the list (where you have to scroll it to see it), after which you will select it up after selecting it. I played a little with him, but I can’t understand anything to prevent this behavior. In addition, I saw a couple of other solutions to this problem, although nothing is working or not working well.

I only need this to work in Chrome. Also, I'm not interested in alternatives for using a picklist.

Thanks for any help, this is much appreciated.

Answer 1

You can save 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/

Answer 2

Here is a clean 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 (select box) and write down the vertical scroll offset before selecting / deselecting. Then reset manually as soon as you complete the action.

The rationale for preventing default behavior for the mousemove event is that if you do not prevent it, and you accidentally click an option when moving the mouse, all options will be canceled.

Answer 3

Here is a solution that works in Chrome FF and IE. This is not very beautiful because it flashes a little when clicked.

 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 4

Tony's answer makes selection errors with arrows, as they only work if you hold the mouse.

I have combined several solutions in this and it works great, at least in Chrome and FF:

 // multiple select: selectable without Control $('select[multiple] option').on('mousedown', function(e) { var $this = $(this), that = this, scroll = that.parentElement.scrollTop; e.preventDefault(); $this.prop('selected', !$this.prop('selected')); setTimeout(function() { that.parentElement.scrollTop = scroll; }, 0); return false; });