使用以前的用戶輸入填充下拉列表

Question

我有一個文本輸入，用戶必須輸入他們的姓氏，我希望他們輸入的姓氏出現在下拉列表中，使用 HTML 和 Javascript。 到目前為止，這是我的代碼，但它不起作用：

<form id= 'surnameReg'>
  <label for='surname'>Surname:</label>
  <input type='text' id="surname">
</form>
<form id='chooseSur'>
  <label for="who">Who:</label>
  <select id="who">
  </select>
</form>

還有我的 JS：

function drop() {
  var surnArr=[];
  var select = document.getElementById("who");
  for(var i = 0; i <surnArr.length; i++) {
    var sur= surnArr[i];
    var op = document.createElement("option");
    op.textContent = sur;
    op.value = sur;
    select.appendChild(op);
  }
}

Answer 1

您可以在submit時在第一個表單上設置事件偵聽器，然后創建 append option ，如下所示：

 document.getElementById("surnameReg").addEventListener("submit",function(e){ e.preventDefault(); let surname = document.getElementById("surname").value; if(surname){ var select = document.getElementById("who"); var op = document.createElement("option"); op.textContent = surname; op.value = surname; select.appendChild(op); } });

 <form id= 'surnameReg' > <label for='surname'>Surname:</label> <input type='text' id="surname" > </form> <form id='chooseSur' > <label for="who">Who:</label> <select id="who"> </select> </form>