How to set select box option if first 5 characters is equal to input field

Question

I have select box and input field, if input field value equal substring first 5 character in option value so set this option as a selected option.

I tired the following:

 $(document).ready(function() { $('#input').change(function() { var inputVal = $(this); $('#select-box1 option').each(function() { var sb1_option = $(this).substring(0, 5); if (inputVal == sb1_option) { //What should I write here } else { //What should I write here } }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-box1"> <option value="00001-test 1">00001-test 1</option> <option value="00002-test 2">00002-test 2</option> <option value="00003-test 3">00003-test 2</option> <option value="00004-test 4">00004-test 4</option> <option value="00005-test 5">00005-test 5</option> </select> <input id="input" type="text" name="Input" value=""> 

Answer 1

You should be able to achieve this with the code below:-

Not much of a change to your original code, but I have updated the change() to keyup() otherwise it will not check until you focus out of the input field

 $(document).ready(function(){ $('#input').keyup(function(){ var inputVal = $(this).val(); $('#select-box1 option').each(function(){ var sb1_option = $(this).val().substr(0,5); if(inputVal == sb1_option){ $("#select-box1").val($(this).val()); } }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-box1"> <option value="00001-test 1">00001-test 1</option> <option value="00002-test 2">00002-test 2</option> <option value="00003-test 3">00003-test 2</option> <option value="00004-test 4">00004-test 4</option> <option value="00005-test 5">00005-test 5</option> </select> <input id="input" type="text" name="Input" value=""> 

Answer 2

Another solution to use input event

A good way to think about it is like this: it's an event that triggers whenever the input changes. This includes -- but is not limited to -- pressing keys which modify the input (so, for example, Ctrl by itself will not trigger the event, but Ctrl-V to paste some text will), selecting an auto-completion option, Linux-style middle-click paste, drag-and-drop, and lots of other things.

 $(document).ready(function(){ $('#input').on('input',function(){ var inputVal = $(this).val(); $('#select-box1 option').each(function(){ var sb1_option = $(this).val().substr(0,5); if(inputVal == sb1_option){ $("#select-box1").val($(this).val()); } }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-box1"> <option value="00001-test 1">00001-test 1</option> <option value="00002-test 2">00002-test 2</option> <option value="00003-test 3">00003-test 2</option> <option value="00004-test 4">00004-test 4</option> <option value="00005-test 5">00005-test 5</option> </select> <input id="input" type="text" name="Input" value="">