当前位置：文江博客话题详情

创建一个选择框，用户可以在其中键入值或从列表中进行选择

发布于 2024-12-29 07:18:56 字数 161 浏览 2 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稀香 2025-01-05 07:18:56

你有几个选择。

这是我在 jQuery 中编写的一个快速函数，它可以完成您想要的操作。此选项需要客户端启用 JavaScript 才能工作。

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

如果您不想将 JavaScript 作为一项要求< /strong>

如果您想要一个没有 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");

You have a few options.

Here's a quick function I threw together in jQuery that will do what you want. This option required the client have JavaScript enabled to work.

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

If you don't want to make JavaScript a requirement

If you want a solution without JavaScript (client side code). You are stuck with placing an input box with the same "name" as your select box next to it or after it and adding an "Other" option to your select box.

<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" />

Now your PHP will have to check both $_POST["selAnimals"] and $_POST["selAnimals_Other"] to derive the correct value.

The best option is to combine the HTML above and the JavaScript above that to create a gracefully degrading solution for those with JavaScript enabled or disabled.

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

I added the extra HTML INPUT tags to the jsfiddle from the top of the answer and only changed 1 line of the jQuery function (makeInputSelect).