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

问题描述 投票:-1回答:1

我指的是这样一个问题:How to set select box option if first 5 characters is equal to input field我试图在具有两列输入选择框,但它不工作表中运行代码。

javascript jquery
1个回答
1
投票

According to your comment

我想在一个表中运行这段代码,意味着同样的情况,但输入和下拉列表是在一个表中的两列

如果我收到了你的问题的权利,你需要知道如何编写HTML <table>

检查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>

你的榜样将是这样的

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.