如何在下拉選項中獲取“輸入”標簽值？

Question

我有一個表單，其中有 2 個輸入標簽和下拉選項。 無論用戶在下拉選項中的“輸入”標簽中鍵入什么內容，我如何獲取這 2 個輸入標簽的值。 當用戶在輸入標簽中輸入時，它應該被填充到下拉選項中

<form action="/action_page.php">
  <label for="team_a">Team A:</label><br>
  <input type="text" id="team_a" name="fname" value=""><br>

  <label for="team_b">Team B:</label><br>
  <input type="text" id="team_b" name="lname" value=""><br>

  <!--How can I both input tag mentioned above, in below options-->
  <label for="teams">Choose winning team:</label>
  <select id="teams" name="teams">
    <option class="dropdown-item" value="">Whatever user types in input tag</option>
    <option class="dropdown-item" value="">Whatever user types in input tag</option>
  </select>
  <br>
  <input type="submit" value="Submit">
</form> 

我使用了以下代碼但不起作用

var team_A_value = document.getElementById('team_a').value;
var team_B_value = document.getElementById('team_b').value;
  document.getElementsByClassName('dropdown-item')[0].innerHTML = team_A_value;
  document.getElementsByClassName('dropdown-item')[1].innerHTML = team_B_value;

Answer 1

在<input>上使用onChange()觸發器，使用自定義參數將值強制為特定<option>

 function setValue(event, n) { // User input const userinput = event.target.value; // Get nth typeOf <option> const option = document.getElementsByTagName('option')[n]; // Set value option.value = option.innerHTML = userinput; }

 <label for="team_a">Team A:</label><br> <input type="text" id="team_a" onchange="setValue(event, 0)" name="fname" value=""><br> <label for="team_b">Team B:</label><br> <input type="text" id="team_b" onchange="setValue(event, 1)" name="lname" value=""><br> <label for="teams">Choose winning team:</label> <select id="teams" name="teams"> <option class="dropdown-item" value="">Whatever user types in input tag</option> <option class="dropdown-item" value="">Whatever user types in input tag</option> </select> <br> <input type="submit" value="Submit">