在html中選擇某些選項時如何使某些輸入字段出現？

Question

我正在處理一個網絡表單，在這里我想制作它，以便您可以選擇三種給定類型的聯系選項之一，並基於它出現相應的輸入字段。我怎樣才能做到這一點？

<select id="contact">
  <option value="address">Address</option>
  <option value="phone">Phone number</option>
  <option value="website">Website</option>
</select>

我一開始試過這個，但不知道如何進一步：

<form name="address" id="address" style="display:none">
      <input type="text" name="address_"><br>
</form>
<form name="phone" id="phone" style="display:none">
      <input type="text" name="phone_"><br>
</form>
<form name="website" id="website" style="display:none">
      <input type="text" name="website_"><br>
</form>

Answer 1

將 onselect 處理程序添加到選項字段。 然后在處理程序中，調用一個函數來附加一個 dom 節點。 像這樣的東西：

<option value="address" onselect="handleSelection">Address</option>

function handleSelection() { 
    document.body.appendChild(someDomNode)
}

Answer 2

將onchange EventListener設置為父<select id="contact">元素比為每個<option>元素設置onselected或其他一些EvenListener更好。

注意：我將 javascript 邏輯分開了一點，這樣更容易閱讀。

 document.getElementById('contact').addEventListener('change', function(e){ let value = e.target.value; removeCreatedElements(); // remove all previously added, if any, before adding a new one let input = createElement(value); document.body.appendChild(input); input.style.display = "block"; }) function createElement(value) { let input = document.createElement("input"); input.type = "text"; input.id = value; input.classList.add("dynamically-added"); input.placeholder = value; return input; } function removeCreatedElements() { let inputs = document.querySelectorAll(".dynamically-added"); for(let i=0; i < inputs.length; i++) { document.body.removeChild(inputs[i]); } }

 #contact { margin-bottom: 40px; }

 <select id="contact"> <option value="address">Address</option> <option value="phone">Phone number</option> <option value="website">Website</option> </select>