Javascript 键盘键和箭头不'；无法正确使用此脚本

我有一个脚本，您可以输出您在选择标记中选择的值，这与单击事件完美配合，但如果我单击第一个输入并按下tab按钮，则不使用

使用鼠标导航到选择标记，然后您可以使用键盘箭头选择值，或者通过键入在选择标记选项中看到的值来选择值，但它不起作用或很少起作用，无法显示在id元素call numbersMessage中输出的值，有时还显示I

必须加倍输入值，才能显示numbersMessage元素中的值。那么，我如何才能让它与箭头键一起工作，当我键入我在选择标记中看到的内容时，这里是我的代码

$（文档）.ready（函数（）{
函数nF（）{
var numberX=document.getElementById（'numbers'）.value；
如果（numberX=‘一’）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='two'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='three'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
}
//工作完美，任何点击都会输出我选择的值
$（“#数字”）。单击（函数（）{
nF（）；
});
//不工作我不想让它工作。。。
$（'#数字'）。按键（函数（）{
nF（）；
});
});

单击第一个输入并按键盘上的tab键，然后键入选择选项value out，或使用键盘上的箭头查看您将在选择标记中选择的值下面选择的值上应显示一条消息

1.
2.
3.

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

$（文档）.ready（函数（）{
函数nF（）{
var numberX=document.getElementById（'numbers'）.value；
如果（numberX=‘一’）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='two'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='three'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
}
//工作完美，任何点击都会输出我选择的值
$（“#数字”）。单击（函数（）{
nF（）；
});
//不工作我不想让它工作。。。
$（'#数字'）。按键（函数（）{
nF（）；
});
$（'#number'）。更改（函数（）{
nF（）；
});
});

单击第一个输入并按键盘上的tab键，然后键入选择选项value out，或使用键盘上的箭头查看您将在选择标记中选择的值下面选择的值上应显示一条消息

1.
2.
3.
请参阅下面的提琴。使用更改功能而不是按键事件


**HTML**
单击第一个输入并按键盘上的tab键，然后键入选择选项value out，或使用键盘上的箭头查看您将在选择标记中选择的值下面选择的值上应显示一条消息

1.
2.
3.

**Javascipt**
$（文档）.ready（函数（）{
函数nF（）{
var numberX=document.getElementById（'numbers'）.value；
如果（numberX=‘一’）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='two'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
否则如果（numberX=='three'）{
$（'#numbersMessage'）.html（'您选择：'+numberX）；
}
}
//工作完美，任何点击都会输出我选择的值
$（“#数字”）。单击（函数（）{
nF（）；
});
//不工作我不想让它工作。。。
$（'#number'）。更改（函数（）{
nF（）；
警报（“Hi”）；
});
});
感谢大家对本帖的回复，但我觉得我需要给Parth Shah一个最好的答案和一分，因为Parth Shah是第一个向我建议更改方法的人，但我仍然会给Hardik Prajapati和Pikachu一分，他们通过使用代码编辑器在答案上付出了更多的努力。
$('#numbers').on('change', function(){
   nF();
});

**HTML**
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

    <p>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.</p>

    <input style='display:block; width: 800px;'type='text'>

    <select id='numbers'>
    <option value='one'>1</option>
    <option value='two'>2</option>
    <option value='three'>3</option>
    </select>

    <p id='numbersMessage'></p>

    **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');
      });

    });