时间戳

首页 > 解决方案 > 如何根据输入值选择选项？

javascript - 如何根据输入值选择选项？

问题描述

我的页面中有类似的输入和 a 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>

标签： javascriptjqueryselectoption

解决方案

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

这是演示代码：

//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>

推荐阅读