键盘键和箭头无法正确使用此脚本

我有这个脚本，您可以输出您在select标签中选择的值，这与click事件完美配合，但如果我点击第一个输入并按Tab键按钮继续使用选择标签

鼠标导航到选择标记然后您可以使用键盘箭头选择值或键入您在选择标记选项中看到的值但它不起作用或它很少工作足以显示我在哪个值它在id元素中输出调用numbersMessage，有时我输出

必须双重输入值才能让它显示我在numbersMessage元素中的值。 那么我怎样才能使用箭头键来实现这一点，当我输入我在select标签中看到的内容时，这是我的代码。

$(document).ready(function(){ function nF(){ var numberX = document.getElementById('numbers').value; if(numberX == 'one'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'two'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'three'){ $('#numbersMessage').html('You selected: ' + numberX); } } //Works perfect, any click will output the value I selected $('#numbers').click(function(){ nF(); }); //Not working how I wan't it to work... $('#numbers').keypress(function(){ nF(); }); }); 

  
Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.
   1 2 3  
 

最后一点，输入元素在这个代码示例中并不重要我只添加了输入元素来向你们展示选择标记脚本无法正常工作的其他情况，这样你们就不会感到困惑为什么我把它放在那里输入标签。

Answer 1

 $('#numbers').on('change', function(){ nF(); }); 

尝试调用下拉列表的更改事件。

Answer 2

 $(document).ready(function(){ function nF(){ var numberX = document.getElementById('numbers').value; if(numberX == 'one'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'two'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'three'){ $('#numbersMessage').html('You selected: ' + numberX); } } //Works perfect, any click will output the value I selected $('#numbers').click(function(){ nF(); }); //Not working how I wan't it to work... $('#numbers').keypress(function(){ nF(); }); $('#numbers').change(function(){ nF(); }); }); 

  
Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.
   1 2 3  
 

Answer 3

请参考以下小提琴。 使用更改function而不是按键事件。

小提琴

 **HTML**  
Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.
   1 2 3  
 **Javascipt** $(document).ready(function(){ function nF(){ var numberX = document.getElementById('numbers').value; if(numberX == 'one'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'two'){ $('#numbersMessage').html('You selected: ' + numberX); } else if(numberX == 'three'){ $('#numbersMessage').html('You selected: ' + numberX); } } //Works perfect, any click will output the value I selected $('#numbers').click(function(){ nF(); }); //Not working how I wan't it to work... $('#numbers').change(function(){ nF(); alert('Hi'); }); });