如果前5个字符等于输入字段，如何设置选择框选项 [英] How to set select box option if first 5 characters is equal to input field

问题描述

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

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.

我厌倦了以下事情:

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

推荐答案

您应该可以使用以下代码实现此目的:-

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

对原始代码的更改不多，但是我已将change()更新为keyup()，否则直到您将焦点移到input字段之前，它都不会检查

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

这篇关于如果前5个字符等于输入字段，如何设置选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！