Multi-select from only-mouse: функционал в FF и IE, в Chrome ничего не происходит - PullRequest
0 голосов
/ 31 января 2011

У меня есть вопрос относительно того, как текстовое поле select должно выполнять множественный выбор. По сути, для приведенного ниже HTML я хотел бы знать, почему Chrome не позволяет мне выбирать , используя только мышь . Нет проблем, используя click + 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>

1 Ответ

0 голосов
/ 04 февраля 2011

В итоге я смоделировал это поведение, прикрепив обработчики событий к событиям 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 срабатывает только один раз, если вы меняете направление выделения; например, если вы начнете выбирать вниз, а затем поднимитесь, последний вариант, к которому прикоснулась мышь, останется выбранным, а каждый параметр над ним будет отменен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...