javascript - 如何从下拉列表中进行选择并输入文本

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>