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>

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

1 个答案: