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

I have similar inputs and a select in my page. If I enter an input value I want to automatically select the option by its value.

The problem is that it works for one input but I have many of those, one the same page and script change values for all of them. What i need achieve that i can enter value for one of them then for second one, but i can't change classes.

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

2 answers

  • answered 2020-06-02 12:19 Swati

    You need to use class instead of id and then use $(this).parent().parent().find(".padalinys option") to traverse through only that select which needed to be changed.

    Here is demo code :

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

  • answered 2020-06-02 12:21 matthias_h

    You can do it like this: Use closest(".row") to get to the closest parent element with the class row and find() to select the options that are related to the input field.

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