2

I have this script that you can output the value that you selected in the select tag this works perfectly with the click event but if I would click on the first input and press the tab button to move on to the select tag with out using the

mouse to navigate to the select tag then you can select the values with the keyboard arrows or by typing out the values you see in the select tag options but it is not working or it rarely works enough to show what value I I'm on which it is outputted in the id element call numbersMessage and some times I

have to double type the value out to get it to show what value I am on in the numbersMessage element. So how can I get this to work with the arrow keys and when I type out what I see in the select tag here is my code. 

 $(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(); }); });
<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>

and one last thing the input element is not important in this code example I only added that input element to show you guys what other situations that the select tag script don't work properly in so you guys won't get confused why I put that input tag in.

Improve this question

3 Answers 3

Reset to default
1 
$('#numbers').on('change', function(){ nF(); });

Try to call on change event of dropdown.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks every one for your'e response to this post but I feel like I need to grant the best answer and a point to Parth Shah because Parth Shah was the first to suggest the change method to me but I will still give points to Hardik Prajapati and Pikachu for putting more effort into their answers by using the code editor.
1 

$(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(); }); });
<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>

Improve this answer

Comments

0

Please Refer Below Fiddle. use change function instead of keypress event.

Fiddle

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

Comments