Как получить Select2 select с помощью клавиатуры вверх-вниз, прежде чем фактически выбрать его? - PullRequest
Новая
       13

Как получить Select2 select с помощью клавиатуры вверх-вниз, прежде чем фактически выбрать его?

0 голосов
/ 23 января 2019

Я хочу отобразить изображение 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 я работаю, но я предполагаю, что это старая версия.

1 Ответ

0 голосов
/ 23 января 2019

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