Bootstrap-Select und Tastaturnavigation

Question

Ich bin mit Bootstrap-select https://silviomoreto.github.io/bootstrap-select/

und ich habe eine der folgenden Drop-Down mit Bild URLS als Wert.

Alles funktioniert gut, wenn ich meine Maus benutze und jede Option auswähle. Wenn ich jedoch die Auf- und Abwärtspfeile meiner Tastatur verwende und jede Option hervorhebe, möchte ich, dass ein Ereignis ausgelöst wird, sodass ich die verfügbaren Bildvorschauen umkehren kann. (Wird hier nicht angezeigt) Wenn ich mit der Maus auf die markierte Option klicke, wird eine Vorschau des ausgewählten Bildes angezeigt.

Die Frage ist, wie kann ich es implementieren, so dass wenn der Benutzer mit den Pfeiltasten auf und ab bewegt wird der Wert ausgewählt ist, so dass sie einfach die verfügbaren Bilder spiegeln können, ohne jedes Mal zu drücken. Ich habe versucht, die folgende

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) { 
    var selected = $(e.currentTarget).val(); 
    alert(selected); 
}); 
but this only works after I hit enter. Any suggestions. 


    <select class="selectpicker form-control" data-size="10" name="cboImage" id="cboImage" onchange="cboImage_onChange()" size="1" tabindex="-98"> 

    <option value="images/1x1.gif">[BLANK IMAGE]</option> 
    <option value="upload/33/img_3009.jpg">10-16-2015 11-56-30 AM.jpg</option> 
    <option value="upload/00/img_3031.jpg">10478631_1494051514186448_2207392604969581462_o.jpg</option> 
    <option value="upload/BB/img_3003.jpg" selected="">10920935_1385769295058553_7186298008992739460_n.jpg</option> 
    <option value="upload/22/img_3006.jpg">11-29-2014 6-35-20 PM.jpg</option> 
    <option value="upload/22/img_3004.jpg">11025665_1380482578935990_5955532852167626303_n.jpg</option> 
    <option value="upload/77/img_2913.jpg">12339668_1517870915178926_9132688390289736139_o.jpg</option> 
    <option value="upload/EE/img_2972.jpg">269586_10151304206069257_1562006627_n.png</option> 
    <option value="upload/88/img_3005.jpg">3305476.jpg</option> 

<option value="upload/00/img_3008.jpg">536962_1.jpg</option> 
<option value="upload/FF/img_2969.jpg">9-3-2015 9-03-19 AM.jpg</option> 
<option value="upload/77/img_2971.jpg">analyze_image.jpg</option> 
<option value="upload/AA/img_3007.jpg">Copy of FL-SAR00_226876_1.jpg</option> 
<option value="upload/11/img_2914.jpg">holiday2015_1_image.jpg</option> 
<option value="upload/33/img_3015.jpg">IMAG0002.jpg</option> 
<option value="upload/BB/img_3013.jpg">IMAG0002.jpg</option> 
<option value="upload/55/img_3014.jpg">IMAG0003.jpg</option> 
<option value="upload/BB/img_3016.jpg">IMAG0003.jpg</option> 
<option value="upload/66/img_3017.jpg">IMAG0004.jpg</option> 
<option value="upload/CC/img_3012.jpg">IMAG0004.jpg</option> 
<option value="upload/66/img_3019.jpg">IMAG0023.jpg</option> 
<option value="upload/FF/img_3018.jpg">IMAG0053.jpg</option> 
<option value="upload/88/img_3011.jpg">image119037-180ae8ff18269a6e395200cb831d928e.jpg</option> 
<option value="upload/66/img_3029.jpg">IMG_1113.JPG</option> 
<option value="upload/CC/img_3028.jpg">IMG_1114.JPG</option> 
<option value="upload/FF/img_3027.jpg">IMG_1123.JPG</option> 
<option value="upload/BB/img_3030.jpg">IMG_1125.JPG</option> 
<option value="upload/AA/img_2917.jpg">L7ViI0Pm_400x400.png</option> 
<option value="upload/CC/img_3025.jpg">MuscleMadison11yrs.jpg</option> 
<option value="upload/FF/img_2960.jpg">My Image</option> 
<option value="upload/BB/img_3026.jpg">TimesSquare2013.jpg</option> 
<option value="upload/99/img_3010.jpg">Windsor-at-Lakoya-Front-Elevation-1024x656.jpg</option> 

      </select> 

Answer 1

Um die Taste UP/DOWN zu verwenden, um die Elemente auszuwählen, die Sie für die $ (‚div.dropdown-menu.open li‘) einen Handler auf keydown Ereignis zuordnen müssen.

das Element auszuwählen, die Sie verwenden müssen:

$('.selectpicker').selectpicker('val', selVal); 

So das Snippet ist:

$(function() { 
 
    $('.selectpicker').selectpicker({ 
 
    style: 'btn-info', 
 
    size: 4 
 
    }); 
 
    $('div.dropdown-menu.open li').on('keydown', function (e) { 
 
    if (e.keyCode == 38) { // Up 
 
     var previousEle = $(this).prev(); 
 
     if (previousEle.length == 0) { 
 
     previousEle = $(this).nextAll().last(); 
 
     } 
 
     var selVal = $('.selectpicker option').filter(function() { 
 
     return $(this).text() == previousEle.text(); 
 
     }).val(); 
 
     $('.selectpicker').selectpicker('val', selVal); 
 

 
     return; 
 
    } 
 
    if (e.keyCode == 40) { // Down 
 
     var nextEle = $(this).next(); 
 
     if (nextEle.length == 0) { 
 
     nextEle = $(this).prevAll().last(); 
 
     } 
 
     var selVal = $('.selectpicker option').filter(function() { 
 
     return $(this).text() == nextEle.text(); 
 
     }).val(); 
 
     $('.selectpicker').selectpicker('val', selVal); 
 

 
     return; 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" 
 
     href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 
 

 
<select class="selectpicker form-control" data-size="10" name="cboImage" id="cboImage" size="1" tabindex="-98"> 
 
    <option value="images/1x1.gif">[BLANK IMAGE]</option> 
 
    <option value="upload/33/img_3009.jpg">10-16-2015 11-56-30 AM.jpg</option> 
 
    <option value="upload/00/img_3031.jpg">10478631_1494051514186448_2207392604969581462_o.jpg</option> 
 
    <option value="upload/BB/img_3003.jpg" selected="">10920935_1385769295058553_7186298008992739460_n.jpg</option> 
 
    <option value="upload/22/img_3006.jpg">11-29-2014 6-35-20 PM.jpg</option> 
 
    <option value="upload/22/img_3004.jpg">11025665_1380482578935990_5955532852167626303_n.jpg</option> 
 
    <option value="upload/77/img_2913.jpg">12339668_1517870915178926_9132688390289736139_o.jpg</option> 
 
    <option value="upload/EE/img_2972.jpg">269586_10151304206069257_1562006627_n.png</option> 
 
    <option value="upload/88/img_3005.jpg">3305476.jpg</option> 
 
    <option value="upload/00/img_3008.jpg">536962_1.jpg</option> 
 
    <option value="upload/FF/img_2969.jpg">9-3-2015 9-03-19 AM.jpg</option> 
 
    <option value="upload/77/img_2971.jpg">analyze_image.jpg</option> 
 
    <option value="upload/AA/img_3007.jpg">Copy of FL-SAR00_226876_1.jpg</option> 
 
    <option value="upload/11/img_2914.jpg">holiday2015_1_image.jpg</option> 
 
    <option value="upload/33/img_3015.jpg">IMAG0002.jpg</option> 
 
    <option value="upload/BB/img_3013.jpg">IMAG0002.jpg</option> 
 
    <option value="upload/55/img_3014.jpg">IMAG0003.jpg</option> 
 
    <option value="upload/BB/img_3016.jpg">IMAG0003.jpg</option> 
 
    <option value="upload/66/img_3017.jpg">IMAG0004.jpg</option> 
 
    <option value="upload/CC/img_3012.jpg">IMAG0004.jpg</option> 
 
    <option value="upload/66/img_3019.jpg">IMAG0023.jpg</option> 
 
    <option value="upload/FF/img_3018.jpg">IMAG0053.jpg</option> 
 
    <option value="upload/88/img_3011.jpg">image119037-180ae8ff18269a6e395200cb831d928e.jpg</option> 
 
    <option value="upload/66/img_3029.jpg">IMG_1113.JPG</option> 
 
    <option value="upload/CC/img_3028.jpg">IMG_1114.JPG</option> 
 
    <option value="upload/FF/img_3027.jpg">IMG_1123.JPG</option> 
 
    <option value="upload/BB/img_3030.jpg">IMG_1125.JPG</option> 
 
    <option value="upload/AA/img_2917.jpg">L7ViI0Pm_400x400.png</option> 
 
    <option value="upload/CC/img_3025.jpg">MuscleMadison11yrs.jpg</option> 
 
    <option value="upload/FF/img_2960.jpg">My Image</option> 
 
    <option value="upload/BB/img_3026.jpg">TimesSquare2013.jpg</option> 
 
    <option value="upload/99/img_3010.jpg">Windsor-at-Lakoya-Front-Elevation-1024x656.jpg</option> 
 
</select>