时间戳

首页 > 解决方案 > 如何在实际选择之前通过键盘上下选择 Select2？

jquery - 如何在实际选择之前通过键盘上下选择 Select2？

问题描述

我想显示选择列表的 url 图像，但目前我只能在实际选择它时才能显示它。

我想要的是在使用向上和向下键浏览列表时显示图像。当前蓝色突出显示的应该显示它的图像，然后我按下，列表中突出显示的下一个项目现在应该显示它的图像，依此类推。

HTML：

<select id="mycombo">
  <option url="https://placekitten.com/200/301" value="kitten1">Kitten 1</option>
  <option url="https://placekitten.com/200/302" value="kitten2">Kitten 2</option>
  <option url="https://placekitten.com/200/303" value="kitten3">Kitten 3</option>
  <option url="https://placekitten.com/200/304" value="kitten4">Kitten 4</option>
</select>
<p></p>
<img src="https://placekitten.com/200/300" alt="" id="myimage">

JS：

$('select').select2();

var $eventSelect = $("#mycombo");

$eventSelect.on("select2:select", function (e) {
  var title = $("#select2-mycombo-container").attr("title");
  var myurl = $('#mycombo option').filter(function () { return $(this).html() == title; }).attr("url");

  $("#myimage").attr("src",myurl);        
});

https://codepen.io/vtastek/pen/ZwGGMN

或者，我希望在浏览列表时看不到抽屉。我无法确定我正在使用哪个 select2 版本，但我认为它是旧版本。

标签： jqueryjquery-select2

解决方案

Select2 在打开时动态创建一个容器，并在关闭事件时销毁这样的容器。

因此，您需要在输入搜索框上委托keyup事件：

$(document).on('keyup', 'span.select2-container--open input.select2-search__field', function(e) {
    if (e.which == 40 || e.which == 38) {
        var idx = $(this).closest('.select2-dropdown').find('li.select2-results__option--highlighted').index();
        var myurl = $('#mycombo option').eq(idx).attr('url');
        $("#myimage").attr("src",myurl);
    }
})


$(document).on('keyup', 'span.select2-container--open input.select2-search__field', function(e) {
    // on arrow down or up
    if (e.which == 40 || e.which == 38) {
        var idx = $(this).closest('.select2-dropdown').find('li.select2-results__option--highlighted').index();
        var myurl = $('#mycombo option').eq(idx).attr('url');
        $("#myimage").attr("src",myurl);
    }
})

$('select').select2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select id="mycombo">
    <option url="https://placekitten.com/200/301" value="kitten1">Kitten 1</option>
    <option url="https://placekitten.com/200/302" value="kitten2">Kitten 2</option>
    <option url="https://placekitten.com/200/303" value="kitten3">Kitten 3</option>
    <option url="https://placekitten.com/200/304" value="kitten4">Kitten 4</option>
</select>
<p></p>
<img src="https://placekitten.com/200/300" alt="" id="myimage">

推荐阅读