不使用CTRL按钮的多选下拉菜单

时间:2018-11-20 10:22:24

标签: javascript php jquery

大家好,我想选择多个下拉菜单,选择其中的值时不使用CTRL。我尝试了这段代码http://jsfiddle.net/xQqbR/1022/,  它工作正常,但我也想使用Shift键选择多个值。在此代码中不起作用。

我尝试使用此代码选择最大值,但是当我们开始从下至上选择时仍然无法正常工作。

var shifted1 = false;
var last_selected = '';

$('#abc option').mousedown(function(e) {
  e.preventDefault();
  var originalScrollTop = $(this).parent().scrollTop();
  //console.log(originalScrollTop);
  if (shifted1 == false) {
    last_selected = $(this);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
  }
  //when shift key is pressed
  else {
    shifted1 = false;
    for (var i = 0; i < $(this).parent().children().length; i++) {
      if (last_selected.next().val() != $(this).val()) {
        last_selected.next().prop('selected', true);
        last_selected = last_selected.next();
      } else {
        last_selected = $(this);
        $(this).prop('selected', true);
        break;
      }
    }
  }

  var self = this;
  $(this).parent().focus();
  setTimeout(function() {
    $(self).parent().scrollTop(originalScrollTop);
  }, 0);

  //return false;
});


$(document).on('keyup keydown', function(e) {
  shifted1 = e.shiftKey;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="abc" multiple="multiple">
  <option value="1">Opt</option>
  <option value="2">Opt</option>
  <option value="3">Opt</option>
  <option value="4">Opt</option>
  <option value="5">Opt</option>
  <option value="6">Opt</option>
  <option value="7">Opt</option>
  <option value="8">Opt</option>
  <option value="9">Opt</option>
  <option value="10">Opt</option>
  <option value="11">Opt</option>
  <option value="12">Opt</option>
  <option value="13">Opt</option>
  <option value="14">Opt</option>
  <option value="15">Opt</option>
</select>

谢谢。

0 个答案:

没有答案
相关问题