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

Posted 2023-04-18

【中文标题】如何从下拉列表中选择并输入文本

【英文标题】：How to select from a drop down list AND type in text

【发布时间】：2019-02-27 22:40:21

【问题描述】：

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

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

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

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

【问题讨论】：

您可以将下拉列表更改为列表，将每个项目放在 (<li></li>) 之间，并使用 css 和 overflow-y: scroll; 为 ul 提供固定高度，您可以使用 jQuery 切换其高度属性.

您好，此人员列表将是动态的并链接到数据库中的表。人们会来来去去，所以我不能使用固定高度，因为高度需要不断变化

没关系，overflow-y: scroll; 让用户在项目数超过给定高度时滚动。如果你想在下拉列表中有一个文本框，你别无选择，只能实现类似的东西。你只需要实现一个方法来从数据库中的记录生成<li></li>。

【参考方案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>

【讨论】：

这非常适合我正在寻找的东西..只有一件事..而不是出现在右侧的文本输入框，是否可以将它放在与 drop 相同的框中下列表？对不起，我对 JS 的了解不是很好

如果我将条件更改为说 function checkValue() if (list.value === "Other (type name here)") other.style.visibility = "visible"; list.style.visibility = "隐藏"; else other.style.visibility = "隐藏";这将删除下拉框（这是我想要的），但文本输入仍位于右侧。

除了可见性，您还可以使用：display: none。在 JS 中：list.style.display = "none"。在this W3Schools site 上，您可以看到可见性和显示之间的区别。希望这会有所帮助！

这行得通！ （我在上面编辑了你的 JS 代码 sn-p 来演示）。不过，我注意到另一件事。当您选择“其他”使您可以在框中输入文本时，右侧的下拉箭头会消失，即使您删除了所有输入的文本，它也不会让您再次返回列表。有没有办法让列表再次出现？

您可以执行here 之类的操作，您可以在选择或文本输入之间切换。但我认为没有一种简单的方法可以在文本输入处于活动状态时保留箭头。