立即發射dropdownlist事件（理想的jQuery）

Question

這與Fire event each time a DropDownList item is selected with jQuery和How to fire an dropdownlist event instantaneously?有關，但那裏的答案並沒有給出我所需要的。

給定一個帶有jQuery + JavaScript的HTML下拉選擇，並允許鼠標​​或鍵盤交互，我想編寫一個動作不僅會觸發最終選擇（「更改」事件），而且會觸發用戶使用鍵盤向上箭頭或向下箭頭更改選擇，而不使用回車鍵確認選擇。特別是，在下拉菜單中選擇顏色時，當用戶通過選項向上或向下箭頭時，我想不斷更改色板的顏色。

以下代碼部分基於Fire event each time a DropDownList item is selected with jQuery的討論，但當使用鍵盤進行選擇時，「獲勝」版本不起作用，並且它在Google Chrome瀏覽器&上非常完整的失敗。我的代碼在Firefox的所有最新版本中都能正常工作，並且在Chrome和Safari中適用於基於鼠標的操作;然而，在Chrome中，當用戶使用鍵盤工作時，我似乎能夠捕捉的唯一事件是「更改」;對於Safari來說，它是值得的。

(function($) { 
     $.fn.dropdownSelect = function(fn) { 
      return this.each(function() { 
       // I'd expect this to be the normal case for selecting with mouse, but only seems to work in Firefox.  
       $('option', this).click(function() { 
        fn(); 
       }); 
       // Selection via arrow keys. Only seems to work in Firefox. 
       $(this).keyup(function() { 
        fn(); 
       }); 
       // Next case is crucial for Safari and Chrome, should be harmless for Firefox. 
       $(this).change(function() { 
        fn(); 
       }); 
      }); 
     } 
    })(jQuery); 

然後我調用它喜歡：

$('#color-dropdown').dropdownSelect(function() { 
    // Act on it here. 
}); 

我想也檢查了「」按鍵'事件，但無濟於事。有任何想法嗎？

Answer 1

你想'keydown'。按鍵事件不會捕獲像箭頭這樣的控制功能。