select a specific option in list box in table

Question

I refer to this question : How to set select box option if first 5 characters is equal to input field I tried to run the code in table that has two columns input and select box but it not working.

Answer 1

According to your comment

I want to run this code in a table, means the same case but input and dropdown list are two columns in a table

If i got your question right, You need to know how to write HTML <table>

Check W3Schools | HTML Tables

table{
border: solid 1px #ccc;
border-top:solid 4px green;
}
td{
padding:10px;
border: solid 1px #CCC;
border-radius:2px;
}

<table>
<tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> <!--Row 1-->
<tr> <td>A2</td> <td>B2</td> <td>C2</td> </tr> <!--Row 2-->
<tr> <td>A3</td> <td>B3</td> <td>C3</td> </tr> <!--Row 3-->
<tr> <td>A4</td> <td>B4</td> <td>C4</td> </tr> <!--Row 4-->
</table>

Your example will be like that

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

table{
border: solid 1px #ccc;
border-top:solid 4px green;
}
td{
padding:10px;
border: solid 1px #CCC;
border-radius:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr><td>column 1</td><td>column 2</td></tr>
<tr>
<td>
<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>
</td>
<td>
<input id= "input" type="text" name="Input" value="">
</td>
</table>