JSFiddle - React, Tailwind, and code Playground

by Omar Tanti

HTML

<select multiple id="MySelect">
      <option>I am Option 1</option>
      <option>I am Option 2</option>
      <option>I am Option 3</option>
      <option>I am Option 4</option>
      <option>I am Option 5</option>
      <option>I am Option 6</option>
      <option>I am Option 7</option>
      <option>I am Option 8</option>
      <option>I am Option 9</option>
    </select>

CSS

#MySelect {
  width: 300px;
  height: 400px;
}

JavaScript

var isDragging = false;
var select = $('#MySelect');


select
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function(e) {
    var wasDragging = isDragging;
    isDragging = false;
    if (wasDragging) {
    		e.preventDefault();
        var selected = select.find('option:selected');
  var values = Array.from(selected).map((el) => el.value);

  select.val(values[values.length - 1]);
    }
});