如何从下拉列表中选择并输入文本

Question

我正在使用列出人员姓名的选择下拉列表制作表单。

如果列表中没有此人，我还希望表单为您提供选择“其他”的选项，然后实际输入某人的姓名（如普通文本输入框）。

我不希望文本输入部分出现在下拉列表下方的单独框中，我希望它们都在同一个框中。

在 vanilla 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>