我如何 select 基于输入值的选项？

Question

我的页面中有类似的输入和 select。如果我输入一个输入值，我想根据它的值自动 select 选项。

问题是它适用于一个输入，但我有很多这样的输入，一个相同的页面和脚本更改所有这些输入的值。我需要实现的是我可以为其中一个输入值然后为第二个输入值，但我无法更改类.

//select option from padalinys 
(function($) {
  $('.test2').on('blur', function(e) {
    let inputVal = $(this).val();

    $('.padalinys option').each(function() {
      if ($(this).val() === inputVal) {
        $(this).prop('selected', true);
      }
    })
  });
})(jQuery);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-2">
    <label class="text-black">Pad. kodas</label>
    <input type="text" name="padkodas[]" class="form-control test2">
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    <label class="text-black">Pad. kodas</label>
    <input type="text" name="padkodas[]" class="form-control test2">
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    <label class="text-black">Pad. kodas</label>
    <input type="text" name="padkodas[]" class="form-control test2">
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>

Answer 1

您需要使用 class 而不是 id 然后使用 $(this).parent().parent().find(".padalinys option") 只遍历需要更改的 select。

这是演示代码：

//select option from padalinys 
(function($) {
  //use .test2
  $('.test2').on('blur', function(e) {
    let inputVal = $(this).val();
    //input->div->div->find select box
    var $selector = $(this).parent().parent().find(".padalinys option");
    $selector.each(function() {
      if ($(this).val() === inputVal) {
        $(this).prop('selected', true);
      }
    })
  });
})(jQuery);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-2">
    <label class="text-black" for="test2">Pad. kodas</label>
    <input type="text" id="test2" name="padkodas[]" class="form-control test2">
    <!--added class-->
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    <label class="text-black" for="test2">Pad. kodas</label>
    <input type="text" id="test2" name="padkodas[]" class="form-control test2">
    <!--added class-->
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>

Answer 2

您可以这样做：使用 closest(".row") 到达最近的父元素 class row 和 find() 到 select与输入字段相关的选项。

(function($) {
  $('.test2').on('blur', function(e) {
    let inputVal = $(this).val();
    $(this).closest('.row').find('.padalinys option').each(function() {
      if ($(this).val() === inputVal) {
        $(this).prop('selected', true);
      }
    })
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<div class="row">
  <div class="col-md-2">
    <label class="text-black">Pad. kodas</label>
    <input type="text" name="padkodas[]" class="form-control test2">
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    <label class="text-black">Pad. kodas</label>
    <input type="text" name="padkodas[]" class="form-control test2">
  </div>
  <div class="col-md-10">
    <label class="text-black" for="padalinys">Padalinys</label>
    <select class="form-control padalinys" name="padalinys[]">
      <option value="1">test - 1</option>
      <option value="2">test - 2</option>
      <option value="3">test - 3</option>
      <option value="4">test - 4</option>
      <option value="5">test - 5</option>
    </select>
  </div>
</div>

我如何 select 基于输入值的选项？

How can I select an option based on the value of an input?

javascript

jquery

select

option