强制/模拟上/下键上<select>的更改事件</select>

Question

我拥有的：

我有一个框可以根据选择切换各种div的显示。

我需要什么：

当使用向上/向下箭头键可视地更改选项时，我还需要更改事件。

注意：我还需要这个方框表现正常，即点击鼠标。

我的问题：

正如大多数人所知，当使用向上/向下箭头键可视地更改选项时，不会触发更改事件。

我的代码：

http://jsfiddle.net/GK49r/

HTML：

<select id="somemenu">
    <option value="A">A</option>
    <option value="Trigger">Trigger</option>
    <option value="B">B</option>
</select>    
<div id="togglethis">Toggle this.</div>

CSS：

#togglethis{display:none;}

jQuery的：

$(document).ready(function() {
$("#somemenu").change(function() {   
if (this.value == 'Trigger') {
        $('#togglethis').slideDown('slow', function() {
        // Animation complete.
    });
    } else {
        $('#togglethis').hide();
    }
});
});

注意：出于某种原因，JSFIDDLE上出现 问题，即上/下键触发更改事件。

Answer 1

$( document ).ready( function () {

    var index = 0,
        length = $( '#somemenu option' ).length;

    $( '#somemenu' ).on({
        change: function () {    
            if ( this.value === 'Trigger' ) {
                $( '#togglethis').slideDown( 'slow', function() {
                    // Animation complete.
                });
            } else {
                $( '#togglethis' ).hide();
            }
        },
        keydown: function ( event ) {

            if ( event.which === 38 ) {
                index--;
                if ( index < 0 ) {
                    index = length - 1;
                }
            } else if ( event.which === 40 ) { 
                index++;
                if ( index >= length ) {
                    index = 0;
                }
            }

            // Now index refers to the current index of the option element.
            // You can now run your required animation
            // Eg: animate( index );
        }
    }); 
});

你可以做的是听取'#somemenu'上的keydown事件并以event.which为基础（38为高达40，向下为40），以这种方式运行你的事件

Answer 2

发表评论作为回答：

我测试了你的代码，我觉得它的行为与我期望的一样。如果您下拉选项列表并使用光标键上下移动突出显示，则不会触发更改事件，因为选择不是最终的，直到您按Enter键使当前突出显示的选项成为所选选项。 / p>

如果你想“预览”选择的效果，也许你可以挂钩选择的keyup / keydown或keypress事件，并在其中检查键是上/下箭头键然后用它来执行您的UI更新。