需要 select 選項由另一個輸入值

Question

我有兩個輸入，一個是簡單輸入，另一個是 select 輸入，帶選項。 當有人輸入文本輸入值時，我如何實現它自動 select 正確選項。

 <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="container"> <div class="col-md-2"> <label class="text-black" for="test2">Job code</label> <input type="text" id="test2" name="jobcode[]" class="form-control"> </div> <div class="col-md-10"> <label class="text-black" for="padalinys">Job</label> <select class="form-control" name="job[]" > <option value="1">Administrator - 1</option> <option value="2">Bartender - 2</option> <option value="3">Mechanic - 3</option> <option value="4">Bodybuilder - 4</option> <option value="5">Doctor- 5</option> </select> </div> </div>

Answer 1

你可以試試這個：

(function($) {
  $('#test2').on('blur', function(e) {
    let inputVal = $(this).val();

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

在這里，我在blur事件的input字段中獲取插入的值。 如果選項的值與輸入字段的值相同，請檢查 select 的每個選項。 如果是這樣，則更改option的selected prop 。

Answer 2

試試這個，這里的代碼只是檢查輸入的值是否在可用的選項中，並將選定的選項更改為與輸入元素中輸入的值相同的選項。

 var test2 = document.getElementById("test2") var test3 = document.querySelector("[name=job]") test2.onchange = () => { if ([...test3.children].some(each => each.value == test2.value)) { test3.value = test2.value }else{ test3.value = 1 } }

 <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="container"> <div class="col-md-2"> <label class="text-black" for="test2">Job code</label> <input type="text" id="test2" name="jobcode[]" class="form-control"> </div> <div class="col-md-10"> <label class="text-black" for="padalinys">Job</label> <select class="form-control" name="job"> <option value="1">Administrator - 1</option> <option value="2">Bartender - 2</option> <option value="3">Mechanic - 3</option> <option value="4">Bodybuilder - 4</option> <option value="5">Doctor- 5</option> </select> </div> </div>