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

Question

有没有办法模仿C输入/选择框,你有一个下拉,顶部有一个空白文本输入？用户可以键入新值或从列表中选择.有没有人想过用PHP/Javascript做这个的方法？AJAX类型的解决方案甚至会更好.

我不知道该怎么称呼这种类型的盒子,我认为它不像大多数人想象的那样是"组合盒子".

Answer 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函数的1行(makeInputSelect).

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