Question

我提到这个问题： How to set select box option if first 5 characters is equal to input field 我试图在具有两列输入和选择框的表中运行代码，但是它不起作用。

Answer 1

我想在表中运行此代码，表示相同的情况，但是输入和下拉列表是表中的两列

如果我的问题正确，那么您需要知道如何编写HTML <table>

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>

您的示例将是这样

$(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>

在表格的列表框中选择一个特定的选项

1 个答案: