我想在使用Tab键导航到选择元素时(在下面的代码片段中)集中显示所有内容。
select {
width: 200px;
border: 1px solid #aaa;
border-radius: 4px;
height: 28px;
overflow: hidden;
}
<select id="" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
我在jQuery中找到了一个解决方案,但我想要普通JavaScript中无法实现的相同功能。
jQuery代码:-
$('.select2').select2({
minimumResultsForSearch: 20
});
$(document).on('focus', '.select2.select2-container', function (e) {
var isOriginalEvent = e.originalEvent
var isSingleSelect = $(this).find(".select2-selection--single").length > 0
if (isOriginalEvent && isSingleSelect) {
$(this).siblings('select:enabled').select2('open');
}
});
最佳答案
尝试类似
<select id="select2" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
document.getElementById("select2").addEventListener("focus", myFunction);
function myFunction() {
var e = document.getElementById("select2");
console.log(e.options[e.selectedIndex].value);
}
关于javascript - Javascript:重点关注Tab键导航上显示选择元素的内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59456718/