Jquery自定义选择/组合框

Posted 2023-02-22

【中文标题】Jquery自定义选择/组合框

【英文标题】：Jquery custom select/combobox

【发布时间】：2011-04-28 18:56:03

【问题描述】：

我正在使用 jQuery；我有一个选择框，其选项是从 json 对象填充的。但由于数据库可能不完整，我想为用户提供输入自定义值的能力。我一直在研究的大多数组合框解决方案都以一种或另一种方式出现故障。在这种情况下有哪些替代解决方案？

【问题讨论】：

我试过 simpleCombo 插件，大多数解决方案都在这里：***.com/questions/195270/…

事实上，简单的组合最接近我想要的功能；但它坏了；

【参考方案1】：

您可以为此使用jQuery Editable Combobox plugin。

jQuery Editable Combobox 是一个 jQuery 允许您转换的功能 任何标签变成可编辑 组合框。

这是通过添加一个新的 携带输入值的元素 键盘。这仅适用于 选择元素。任何其他元素 此功能将应用于 will 被忽略。

【讨论】：

需要另外一个字段来设置值；空间真的很有限，但是我会把它作为一个选项；

后悔之前的评论，我错了。非常适合我的应用程序。您可以直接在选择框字段中输入。

请更新链接，因为它不再有效

【参考方案2】：

也许是一个自动完成框？用户可以开始输入并显示您的选项的位置，但也可以输入不同的值。喜欢：

QuickSelect 插件可以将您的<select> 框更改为其中之一。 http://github.com/dcparker/jquery_plugins/tree/master/quickselect

【讨论】：

嗯，现在试试。但是我的选择框中填充的选项是数字，所以类似自动完成的功能几乎没用。如果有一个选项显示下拉列表而不考虑输入匹配，它会起作用。谢谢

【参考方案3】：

Professional jQuery based Combobox control? 上的解决方案都专注于使用输入作为过滤和自动完成现有选择值的手段。

我看到的“jQuery Editable Combobox”的主要问题是它仍然是一个选择列表，而且你可以开始输入新的东西一点也不明显。

如果您正在寻找传统的组合框，它只是“键入内容或从这些预定义的值中选择”（不，我们不会在您键入时隐藏不匹配的组合框），您可能需要做的就是

<select id="combo4" style="width: 200px;"
            onchange="$('input#text4').val($(this).val());">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input id="text4"
       style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

看 http://bit.wisestamp.com/uncategorized/htmljquery-editable-combo-2/

应该很容易将它封装到一个转换现有选择标签的插件中，尽管我还没有看到这样做。

【讨论】：

我使用 Jquery UI 自动完成的一种方法 => ***.com/questions/4776754/…