Question

我希望通过使用接受的答案here，让我的应用程序上的多个选择列表更加用户友好，而不要求用户按住控制键来选择多个选项。

效果很好，除非我注意到如果您在点击选项时稍微移动鼠标，它会取消选择之前选择的所有选项。

有没有办法纠正这种行为，还是我不得不忍受的事情？

示例：

$('select[multiple] option').mousedown(function() {
  $(this).prop('selected', !$(this).prop('selected'));
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" multiple="multiple">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

Answer 1

如果您添加第二个事件处理程序来侦听mousemove事件，您可以告诉它忽略默认操作。这可以防止所选选项下降，但保留原始功能

＆＃13;

$('select[multiple] option').on('mousedown', function(event) {
    this.selected = !this.selected;
    return false;
});

// Prevent the mousemove from having any effect on the select  box
$('select[multiple] option').on('mousemove', function(event) {
    event.preventDefault();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" multiple="multiple" size="5">
  <option>Apple</option>
  <option>Banana</option>
  <option>Coconut</option>
  <option>Date</option>
  <option>Elderberry</option>
</select>

＆＃13;

单击时移动鼠标时，多个选择列表会取消选择所有选择

1 个答案: