我希望能够使用箭头键到达我想要的 select2 选项,然后按 Tab 键选择该选项,然后像往常一样按 Tab 键转到下一个元素。
我已经得到了向下箭头来打开 select2,如下所示:
$(document).on('keydown', '.select2', function(e) {
if (e.originalEvent && e.which == 40) {
e.preventDefault();
$(this).siblings('select').select2('open');
}
});
我还可以使用箭头到达我需要去的地方。现在我正在努力使选项卡部分正常工作。
我假设自从select2-search__field
当我按下按键时有焦点,这就是我将事件绑定到的元素?然后大概我需要获取当前突出显示的选项的值并触发 select2 更改?
我不是 100% 确定这是正确的方法,但我不太明白。
为了实现这一点,你可以使用selectOnClose: true
:
$(document).on('keydown', '.select2', function(e) {
if (e.originalEvent && e.which == 40) {
e.preventDefault();
$(this).siblings('select').select2('open');
}
});
$('select').select2({
selectOnClose: true
});
select {
min-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<select>
<option>AAAAA</option>
<option>BBBB</option>
<option>CCCC</option>
<option>DDDD</option>
<option>EEEE</option>
<option>FFFF</option>
<option>GGGG</option>
</select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)