Wie kann ich eine HTML-mehrfach-Auswahl-handeln wie die control-Taste gedrückt gehalten, immer

Möchten Sie vielleicht eine einfachere Lösung, wie mit einer Liste von Checkboxen innerhalb eines div mit overflow-Eigenschaft wird festgelegt, um zu scrollen. Das funktioniert vielleicht besser für Sie. Immer ein drop-down zu tun, was Sie gefragt haben, ist ein bisschen beteiligt.

Sehen diese Geige zum Beispiel

HTML

<div id="container">
    <label><input type="checkbox" name="test" value="1" />Option 1</label>
    <label><input type="checkbox" name="test" value="2" />Option 2</label>
    <label><input type="checkbox" name="test" value="3" />Option 3</label>
    <label><input type="checkbox" name="test" value="4" />Option 4</label>
    <label><input type="checkbox" name="test" value="5" />Option 5</label>
    <label><input type="checkbox" name="test" value="6" />Option 6</label>
    <label><input type="checkbox" name="test" value="7" />Option 7</label>
    <label><input type="checkbox" name="test" value="8" />Option 8</label>
    <label><input type="checkbox" name="test" value="9" />Option 9</label>
    <label><input type="checkbox" name="test" value="10" />Option 10</label>
    <label><input type="checkbox" name="test" value="11" />Option 11</label>
    <label><input type="checkbox" name="test" value="12" />Option 12</label>
</div>

CSS

label{display:block;}
#container{height:100px;width:200px;overflow:scroll;}

Den oben genannten Lösungen haben den großen Nachteil nicht unterstützt Auswahl in der checkbox, das ist eigentlich der Grund, warum ich verwenden würde <select>-Boxen über checkbox-inputs in den ersten Platz. Zunächst besuchte ich diese Seite finden Sie eine built-in Möglichkeit dieses Problem zu beheben, aber in Anbetracht der oben genannten Antworten, werde ich nur schreiben, dass meine eigenen code.

Den folgenden code hat auch den Vorteil, dass es nicht das update auf mouseup-im Gegensatz zu den aktuellen top-Antwort von iambriansreed, aber auf mousedown, das ist die Standardeinstellung in Browsern.

Nur, um zu helfen, zukünftige Googler, meine folgenden code:

JS:

//Copyright (c) 2018 Joeytje50. All rights reserved.
//This code is licenced under GNU GPL3+; see <http://www.gnu.org/licenses/>

//Source code and most recent version:
//https://gist.github.com/Joeytje50/2b73f9ac47010e7fdc5589788b80af77

//select all <options> within `sel` in the range [from,to]
//change their state to the state sel.options[from] is in,
//ie. change it to the current state of the first selected element
function selectRange(sel, from, to) {
  var toState = sel.options[from].selected;
  //make sure from < to:
  if (from > to) {
    var temp = from;
    from = to;
    to = temp;
  }
  if (!(sel instanceof HTMLSelectElement)) {
    throw new TypeError('selectRange requires a single non-jQuery select-element as first parameter');
  }
  //(de)select every element
  for (var i=from; i<=to; i++) {
    sel.options[i].selected = toState;
  }
}

$(function() {
  $('.addSelect').data('select-start', 0); //default selection start
  $('.addSelect').on('mousedown', function(e) {
    $(this).focus();
    //clicking on the edge of the <select> shouldn't do anything special
    if (!$(e.target).is('option')) return;
    //if Ctrl is pressed, just let the built-in functionality take over
    if (e.ctrlKey) return;
    //keep everything selected that's not affected by the range within a shift-click
    if (e.shiftKey) {
      var fromIdx = $(this).data('select-start')
      selectRange(this, $(this).data('select-start'), e.target.index);
      e.preventDefault();
      return false;
    }
    //save the starting <option> and the state to change to
    $(this).data('select-start', e.target.index);
    e.target.selected = !e.target.selected;
    e.preventDefault();
    //save a list of selected elements, to make sure only the selected <options>
    //are added or removed when dragging
    var selected = [];
    for (var i=0;i<this.selectedOptions.length;i++) {
      selected.push(this.selectedOptions[i].index);
    }
    $(this).data('selected', selected);
    $(this).children('option').on('mouseenter', function(e) {
      var sel = this.parentElement;
      //first reset all options to the original state
      for (var i=0;i<sel.options.length;i++) {
        if ($(sel).data('selected').indexOf(i) == -1) {
          sel.options[i].selected = false;
        } else {
          sel.options[i].selected = true;
        }
      }
      //then apply the new range to the elements
      selectRange(sel, $(sel).data('select-start'), e.target.index);
    });
  });
  //clean up events after click event has ended.
  $(window).on('mouseup', function() {
    $('.addSelect').children('option').off('mouseenter'); //remove mouseenter-events
  });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="addSelect" multiple size="10">
<option value="0">Foo0</option>
<option value="1">Bar1</option>
<option value="2">Baz2</option>
<option value="3">Lol3</option>
<option value="4">Heh4</option>
<option value="5">Hey5</option>
<option value="6">Meh6</option>
<option value="7">Xcq7</option>
<option value="8">Hmm8</option>
<option value="9">End9</option>
</select>

Fühlen Sie sich frei, um diesen code zu verwenden, indem Sie einfach kopieren Sie es auf jedes Projekt, das Sie möchten, es zu benutzen auf.