当数据来自ajax时,可以在select2顶部添加一个选项。在select2中,可以通过使用createTag
函数来动态创建选项。当用户输入一个不存在的选项时,可以通过ajax请求将该选项添加到数据源中,并在select2的顶部显示出来。
以下是一个示例代码:
$('#mySelect').select2({
ajax: {
url: 'https://example.com/api/data',
dataType: 'json',
processResults: function (data) {
// 处理ajax返回的数据
return {
results: data
};
}
},
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
// 创建一个新的选项
return {
id: term,
text: term,
newOption: true
};
},
templateResult: function (data) {
// 在select2的顶部显示新创建的选项
if (data.newOption) {
return $('<span style="color: red;">New: </span>' + data.text);
}
return data.text;
}
});
在上述代码中,createTag
函数用于创建新的选项,templateResult
函数用于自定义选项的显示样式。你可以根据自己的需求进行修改和扩展。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云