How to avoid the need for ctrl-click in a select box using Javascript?

Question

I thought it would be a simple hack, but I am now looking for a watch and cannot see to find the correct search query. I want to have the usual multiple select box ( <select multiple="multiple"> ), except that I don't want the user to hold down the control key to make multiple selections.

In other words, I want the left click to switch the <option> element under the cursor without changing the others. In other words, I want something similar to a combo list box, but it behaves like a group of checkboxes.

Can anyone suggest an easy way to do this in Javascript? Thank.

Answer 1

Check out this script: http://jsfiddle.net/xQqbR/1022/

Basically you need to override the mousedown event for each <option> and toggle the selected property.

 $('option').mousedown(function(e) { e.preventDefault(); $(this).prop('selected', !$(this).prop('selected')); return false; }); 

For simplicity, I gave "option" as the selector above. You can configure it to match <option>s with certain <select> elements. For ex: $('#mymultiselect option')

Answer 2

In order to solve this problem myself and notice the behavior that was heard, a simple interception of mousedown and setting the attribute would be, therefore, an override of the select element was made and it works well.

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

Note. This code corrects erroneous behavior by replacing the select element in the DOM. This is a little aggressive and will destroy event handlers that you could bind 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> 

Answer 3

Techfoobar's answer is buggy, it does not select all options if you drag the mouse.

Sergio's answer is interesting, but cloning and deleting events related to the drop-down list is not very nice.

Try this answer .

Note. It does not work in Firefox, but it works fine in Safari / Chrome / Opera. (I have not tested it in IE)

Answer 4

I had the same problem today, as a rule, it is advised to use a list of hidden flags and emulate behavior using css, thus it is easier to manage, but in my case I do not want to change the html.

At the moment, I tested this code only with google chrome, I don’t know if it works with another browser, but it should:

 var changed; $('select[multiple="multiple"]').change(function(e) { var select = $(this); var list = select.data('prevstate'); var val = select.val(); if (list == null) { list = val; } else if (val.length == 1) { val = val.pop(); var pos = list.indexOf(val); if (pos == -1) list.push(val); else list.splice(pos, 1); } else { list = val; } select.val(list); select.data('prevstate', list); changed = true; }).find('option').click(function() { if (!changed){ $(this).parent().change(); } changed = false; }); 

Of course, suggestions are welcome, but I have not found another way