如何從下拉列表中選擇並輸入文本

Question

我正在通過選擇下拉列表制作表格，其中列出了人們的姓名。

我還希望該表格為您提供選擇“其他”的選項，然后在列表中沒有該人的情況下，可以實際鍵入某人的姓名（如普通文本輸入框）。

我不希望文本輸入部分出現在下拉列表下方的單獨框中，我希望它們都在同一框中。

可以在香草javascript中使用此功能，而無需使用jquery插件嗎？

 <form action="" method="post"> <br> List of people: <select> <option>John Doe</option> <option>Jane Doe</option> <option>Richard Doe</option> <option>Other (type name here)</option> </select> <br><br> <input type="submit" value="Submit"> <br><br> </form> 

Answer 1

您可以執行類似以下代碼的操作。 它完全可以根據您的喜好進行調整。

 let list = document.getElementById("list"); let other = document.getElementById("other"); function checkValue() { if (list.value === "Other (type name here)") { other.style.visibility = "visible"; list.style.display = "none" } else { other.style.visibility = "hidden"; } } 

 <form action="" method="post"> <br /> List of people: <select id="list" onchange="checkValue()"> <option>John Doe</option> <option>Jane Doe</option> <option>Richard Doe</option> <option>Other (type name here)</option> </select> <input type="text" style="visibility: hidden" id="other" /> <br /><br /> <input type="submit" value="Submit"> <br /><br /> </form>