f1r3br4nd f1r3br4nd - 1 year ago 127
HTML Question

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

I thought this would be a simple hack, but I've now been searching for hours and can't seen to find the right search term. I want to have an ordinary multiple select box (

<select multiple="multiple">
) except I don't want the user to have to hold down the control key to make multiple selections.

In other words, I want a left click to toggle the
element that's under the cursor without changing any of the others. In other other words, I want something that looks like a combo list box but behaves like a group of check boxes.

Can anybody suggest a simple way to do this in Javascript? Thanks.

Answer Source

Check this fiddle: http://jsfiddle.net/techfoobar/xQqbR/

You basically need to override the mousedown event for each <option> and toggle the selected property there.

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

For simplicity, I've given 'option' as the selector above. You can fine tune it to match <option>s under specific <select> element(s). For ex: $('#mymultiselect option')

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download