Jquery 引导选择和键盘导航

我正在使用引导选择

我有一个下拉列表，以图像URL作为值

当我使用鼠标并选择每个选项时，一切正常。但是，当我使用键盘上的上下箭头并突出显示每个选项时，我希望触发一个事件，这样我就可以浏览可用的图像预览。（此处未显示）当我使用鼠标单击高亮显示的选项时，它会显示所选图像的预览

问题是如何实现它，以便在用户使用键盘箭头上下移动时选择该值，这样他们就可以轻松地翻转可用图像，而无需每次按enter键。我试过以下方法

$('.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>

$（'.selectpicker'）。on（'changed.bs.select'，函数（e，clickedIndex，newValue，oldValue）{
所选变量=$（e.currentTarget）.val（）；
警报（选定）；
});
但这只有在我按下回车键后才起作用。任何建议。
[空白图像]
10-16-2015 11-56-30 AM.jpg
10478631_1494051514186448_2207392604969581462_o.jpg
10920935_13857692295058553_7186298008992739460_n.jpg
11-29-2014 6-35-20 PM.jpg
11025665_13804825578935990_5955532852167626303_n.jpg
12339668_1517870915178926_9132688390289736139_o.jpg
269586_1015130420069257_1562006627_n.png
3305476.jpg
536962_1.jpg
9-3-2015 9-03-19 AM.jpg
分析_image.jpg
FL-SAR00_226876_1.jpg的副本
holiday2015_1_image.jpg
imag002.jpg
imag002.jpg
imag003.jpg
imag003.jpg
imag004.jpg
imag004.jpg
IMAG0023.jpg
IMAG0053.jpg
图像119037-180ae8ff18269a6e395200cb831d928e.jpg
IMG_1113.JPG
IMG_1114.JPG
IMG_1123.JPG
IMG_1125.JPG
L7ViI0Pm_400x400.png
MuscleMadison11yrs.jpg
我的形象
TimesSquare2013.jpg
温莎-at-Lakoya-Front-Elevation-1024x656.jpg

为了使用向上/向下键选择元素，您需要在$（'div.dropdown-menu.open li'）的keydown事件上附加处理程序

要选择需要使用的图元，请执行以下操作：

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

因此，这个片段是：

$（函数（）{
$（'.selectpicker'）。selectpicker({
样式：“btn信息”，
尺码：4
});
$（'div.dropdown-menu.open li'）。打开（'keydown'，函数（e）{
如果（e.keyCode==38）{//Up
var previousEle=$（this.prev（）；
如果（上一个ele.length==0）{
previousEle=$（this.nextAll（）.last（）；
}
var selVal=$（'.selectpicker选项'）.filter（函数（）{
返回$（this.text（）==previousEle.text（）；
}).val（）；
$（'.selectpicker'）。selectpicker（'val'，selVal）；
返回；
}
如果（e.keyCode==40）{//Down
var nextEle=$（this.next（）；
如果（nextEle.length==0）{
nextEle=$（this.prevAll（）.last（）；
}
var selVal=$（'.selectpicker选项'）.filter（函数（）{
返回$（this.text（）==nextEle.text（）；
}).val（）；
$（'.selectpicker'）。selectpicker（'val'，selVal）；
返回；
}
});
});

[空白图像]
10-16-2015 11-56-30 AM.jpg
10478631_1494051514186448_2207392604969581462_o.jpg
10920935_13857692295058553_7186298008992739460_n.jpg
11-29-2014 6-35-20 PM.jpg
11025665_13804825578935990_5955532852167626303_n.jpg
12339668_1517870915178926_9132688390289736139_o.jpg
269586_1015130420069257_1562006627_n.png
3305476.jpg
536962_1.jpg
9-3-2015 9-03-19 AM.jpg
分析_image.jpg
FL-SAR00_226876_1.jpg的副本
holiday2015_1_image.jpg
imag002.jpg
imag002.jpg
imag003.jpg
imag003.jpg
imag004.jpg
imag004.jpg
IMAG0023.jpg
IMAG0053.jpg
图像119037-180ae8ff18269a6e395200cb831d928e.jpg
IMG_1113.JPG
IMG_1114.JPG
IMG_1123.JPG
IMG_1125.JPG
L7ViI0Pm_400x400.png
MuscleMadison11yrs.jpg
我的形象
TimesSquare2013.jpg
温莎-at-Lakoya-Front-Elevation-1024x656.jpg
感谢您提供了出色的解决方案。这对我想做的事很有效。