Question

我有选择框和输入字段，如果输入字段值等于选项值中前5个字符的子字符串，那么将此选项设置为选中的选项。

我厌倦了以下事情：

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

使用input event

的另一种解决方案

一种思考的好方法是这样的：每当输入更改时，该事件就会触发。这包括-但不限于-按下可修改输入的键（例如，Ctrl本身不会触发事件，而Ctrl-V会粘贴一些文本），选择自动补全选项， Linux样式的单击中键粘贴，拖放以及许多其他操作。

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

如果前5个字符等于输入字段，如何设置选择框选项

1 个答案: