Question

我想显示选择列表的url图像，但目前只有我真正选择它时，才能显示它。

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

HTML：

Foo::Bar::TEST2 # => true

JS：

<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">

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

（可选）我不希望在浏览列表时看到抽屉。我无法弄清楚我正在使用哪个select2版本，但我认为它是一个旧版本。

Answer 1

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">

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

1 个答案: