制作一个选择框，用户可以在其中输入值或从列表中选择答案

【问题标题】：Making a select box that users can type values in, or choose from list制作一个选择框，用户可以在其中输入值或从列表中选择
【发布时间】：2012-02-19 18:19:07
【问题描述】：

有没有一种方法可以模仿 C 输入/选择框，在该框的顶部有一个空白文本条目的下拉菜单？用户可以键入新值或从列表中选择。有没有人想办法用 PHP/Javascript 做到这一点？ AJAX 类型的解决方案甚至会更好。

我不知道如何称呼这种类型的盒子，我认为它不像大多数人想象的那样是一个“组合框”。

【问题讨论】：

标签： php html forms input

【解决方案1】：

你有几个选择。

这是我在 jQuery 中整合的一个快速函数，可以满足您的需求。此选项需要客户端启用 JavaScript 才能工作。

http://jsfiddle.net/QrA4N/25/

如果您不想让 JavaScript 成为必需项

如果您想要一个没有 JavaScript（客户端代码）的解决方案。您必须在其旁边或之后放置一个与您的选择框具有相同“名称”的输入框，并向您的选择框添加一个“其他”选项。

<select name="selAnimals" id="selAnimals">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="bird">Bird</option>
    <option value="guineapig">Guinea Pig</option>
    <option value="">Other</option>
</select>
<input type="text" name="selAnimals_Other" id="selAnimals_Other" />

现在您的 PHP 必须同时检查 $_POST["selAnimals"] 和 $_POST["selAnimals_Other"] 以得出正确的值。

最好的选择是将上面的 HTML 和上面的 JavaScript 结合起来，为启用或禁用 JavaScript 的用户创建一个优雅的降级解决方案。

http://jsfiddle.net/QrA4N/26/

我从答案顶部向 jsfiddle 添加了额外的 HTML INPUT 标签，并且只更改了 jQuery 函数 (makeInputSelect) 的 1 行。

var $inp = $("#" + id + "_Other");

【讨论】：

@Sarfraz - 我为那些对代码如何工作感到好奇的人添加了这个答案。显然您不想重新发明轮子，但是查看成熟库的源代码（可能包含许多其他功能）有点令人生畏。此外，促进/解释适当的无脚本和可访问性优雅降级也很重要。

【解决方案2】：

您可以为此使用著名的Chosen 库:)

顺便说一句，见第二个国家的例子。

【讨论】：

酷——如果它有一个内置的添加功能。:) 我会看看我能想出什么。
找到了一个包含“添加”功能的分叉。感谢您的链接！
你认为你可以发布一个分叉的链接吗？对于我和任何其他人