仅通过鼠标进行多选：在 FF 和 IE 中起作用，在 Chrome 中没有任何反应

Question

我有一个问题，关于选择文本框应该如何执行多选。基本上，对于下面的 HTML，我想知道为什么 Chrome 不允许我仅使用鼠标进行选择。使用单击 + Ctrl/Shift 没有任何问题，但是当我尝试通过左键单击 + 将鼠标拖动到列表中的项目上进行选择时，没有任何反应。 FF和IE都支持这种选择。

我想知道的是，我是否可以在不使用大量 JavaScript 来重新发明选择的情况下解决这个问题？其次，为什么会出现这种情况。

样本选择：

<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

我最终通过将事件处理程序附加到 mouseUp、mouseDown 和 mouseOver 事件来模拟此行为。我使用 mouseUp 和 mouseDown 来控制是否选择，实际选择发生在 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>

使用 last 和 oldv 使函数复杂化的目的是，如果您更改选择方向，onMouseOver 只会触发一次；例如，如果您开始向下选择，然后向上选择，则鼠标触摸的最后一个选项将保持选中状态，而其上方的每个选项都将取消选择。