javascript - 不使用 CTRL 按钮的多选下拉菜单
问题描述
大家好,我想选择多个下拉菜单,在没有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>
提前致谢。
解决方案
推荐阅读
- javascript - React 尝试将值映射到 SVG,以便动态呈现图标
- ceph - 如何将 BlueStore 与 ceph 分离并单独运行?
- chatbot - AWS Lex 聊天机器人未记录话语(错过和检测到的话语)
- sql - 将日期范围分解为每个工作每天的小时数
- javascript - 从 Angular 中的对象以 HTML 格式显示项目
- angular - Angular 7 如何在通过键盘使用箭头键进行“拖放”时保持对元素的关注。向上箭头工作一次然后失去焦点
- node.js - 我可以为 Stripe Checkout (nodejs) 创建自己的成功 URL
- android - Android:如何使用 Android Camera API 检测视频大小
- flutter - Flutter BLoC 状态管理
- sql - 从 Postgres 中的多维数组中插入行