Question

I have a question, regarding how the select text box is supposed to perform multiselect. Basically, for the below HTML, I’d like to know why Chrome won’t allow me to select using only the mouse. There are no problems, using click + Ctrl/Shift, but when I try to select by left-click + dragging the mouse over items in the list, nothing happens. Both FF and IE support this kind of selection.

What I would like to know, is if I could get around the problem without using ridiculous amounts of JavaScript to reinvent selection; secondly, why does this happen.

A sample select:

<select id="ListBoxFound" multiple="multiple" name="ListBoxFound">
  <option value="756">Teacher Assistants </option>
  <option value="744">Teachers and Instructors, All Other </option>
  <option value="284">Team Assemblers </option>
  <option value="775">Technical Directors/Managers </option>
  <option value="794">Technical Writers </option>
  <option value="227">Telecommunications Equipment Installers and Repairers, Except Line Installers </option>
  <option value="259">Telecommunications Line Installers and Repairers </option>
  <option value="478">Telecommunications Specialists </option>
  <option value="1036">Telemarketers </option>
  <option value="1041">Telephone Operators </option>
  <option value="1052">Tellers </option>
  <option value="171">Terrazzo Workers and Finishers </option>
  <option value="725">Textile Bleaching and Dyeing Machine Operators and Tenders </option>
  <option value="726">Textile Cutting Machine Setters, Operators, and Tenders </option>
  <option value="1075">Textile Knitting and Weaving Machine Setters, Operators, and Tenders </option>
  <option value="333">Textile Winding, Twisting, and Drawing Out Machine Setters, Operators, and Tenders </option>
  <option value="337">Textile, Apparel, and Furnishings Workers, All Other </option>
</select>

Answer 1

I ended up simulating this behavior by attaching event handlers to mouseUp, mouseDown and mouseOver events. I use mouseUp and mouseDown to control whether it’s selecting or not, and the actual selection happens in mouseOver.

<script>
$(document).ready(function () {
var sele = false;
var last = null;
$("select#ListBoxFound>option").mouseup(function(){
    $(this).attr('selected', sele);
    sele = false;
}).mousedown(function(){
  $(this).attr('selected', sele);
    last = $(this);
    sele = true;
}).mouseover(function() { 
    if (sele) {
        var oldv =  $(this).attr('selected');
        if(oldv == last.attr('selected')) {
            last.attr('selected', !oldv);
        }
        $(this).attr('selected', !oldv);
        last = $(this);
    }
    });
});
</script>

The purpose of complicating the function with last and oldv is that onMouseOver only fires once if you’re changing the direction of selection; for instance, if you start selecting downwards, and then go up, the last option the mouse has touched will remain selected, and every option above it will deselect.