1

I am using a select option box and dont like the fact a user has to hold down the control key to select multiple options. It is just not intuitive to basic admin users.

I have seen many solutions here and on other sites and any I have seen will not work on all browsers.

Is there a simple solution that I have not seen.

Here is what I am using but has issues in FF.

<select name="courses[_ids][]" multiple="multiple" id="courses-ids" class="form-control">
    <option value="1">Handling Training</option>
    <option value="2">Safety</option>
    <option value="3">Induction Training</option>
</select>

js:

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

    var scroll = this.scrollTop;

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

    this.scrollTop = scroll;

    $(this).focus();
}).mousemove(function(e){e.preventDefault()});
Keith Power
  • 13,891
  • 22
  • 66
  • 135
  • 1
    _"It is just not intuitive to basic admin users"_ What makes you say that? Ctrl-clicking is _the_ way of selecting individual multiple items in pretty much any UI element, along with shift-clicking to select a range. – James Thorpe Nov 10 '15 at 14:31
  • My experience with working with office staff who start to move to cloud systems is they assume the select box only allows one choice. It is not obvious unless you are familiar that you have to hold ctrl – Keith Power Nov 10 '15 at 14:44
  • 1
    If you think the norm isn't intuitive enough, add an indication on the page. It's going to be very counter-intuitive to anyone who knows how to use CTRL if you change it. – Domino Nov 10 '15 at 14:58
  • ...but it's been asked before. http://stackoverflow.com/questions/8641729/how-to-avoid-the-need-for-ctrl-click-in-a-multi-select-box-using-javascript – Domino Nov 10 '15 at 14:59
  • yes saw that post, but has issues in different browser, I am looking for something that works across all. – Keith Power Nov 10 '15 at 15:41

1 Answers1

-1

Use checkboxes instead. With a label to allow clicking the text, and put them in an element with scrolling overflow, if you "need" a scroll bar.

<div id="courses-ids">
    <label><input type="checkbox" name="courses[_ids][]" value="1">Handling Training</label>
    <label><input type="checkbox" name="courses[_ids][]" value="2">Safety</label>
    <label><input type="checkbox" name="courses[_ids][]" value="3">Induction Training</label>
</div>

No backend changes should be nessecary.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • Sorry, I am using a framework that auto-generates the ` – Keith Power Nov 10 '15 at 15:40
  • May I ask which framework? A select with multiple set and checkboxes are practically the same thing. Any reasonable framework should be able to switch between the two with a simple flag/parameter. – RoToRa Nov 11 '15 at 09:37
  • I am using CakePHP 3.1 – Keith Power Nov 11 '15 at 09:44
  • I'm not familiar with CakePHP, but following API page seems to indicate you just need to set the attribute `multiple` to `"checkboxes"`: http://api.cakephp.org/3.0/class-Cake.View.Helper.FormHelper.html#_select – RoToRa Nov 11 '15 at 09:57