我想要一个包含一组值的下拉列表,但也允许用户“选择”此处未列出的新值。
我看到select2如果您在 tags
模式下使用它,则支持此功能,但是有没有办法在不使用标签的情况下做到这一点?
请您参考如下方法:
excellent answer由@fmpwizard提供适用于 Select2 3.5.2 及更低版本,但不适用于 4.0.0。
从很早开始(但可能没有这个问题那么早),Select2 就支持“标记”:如果您允许,用户可以添加自己的值。这可以通过 tags
选项启用,您可以使用 an example in the documentation 来尝试。 .
$("select").select2({
tags: true
});
默认情况下,这将创建一个与他们输入的搜索词具有相同文本的选项。如果您希望以特殊方式标记所使用的对象,则可以修改该对象,或者在选择该对象后远程创建该对象。
$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});
除了在通过 select2:select
事件传入的对象上充当易于识别的标志之外,额外的属性还允许您在结果中呈现略有不同的选项。因此,如果您想通过在其旁边放置“(新)”来直观地表明它是一个新选项,您可以这样做。
$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append(" <em>(new)</em>");
}
return $result;
}
});