我正在使用 jQuery Select2 (v4) 标签选择器插件。
我想监听何时在 select 元素中创建新标签并触发 ajax 请求以存储新标签。我发现有 createTag
事件,但每次在 select2 元素中输入一个字母时,这似乎都会触发。如我的 fiddle 所示:http://jsfiddle.net/3qkgagwk/1/
是否有类似的事件仅在新标签输入完成时触发? IE。它被一个灰色的盒子包围着。
最佳答案
很遗憾,我找不到任何原生 方法。但是,如果您对简单的“解决方法”感兴趣,也许这会让您更接近:
$('.select2').select2({
tags: true,
tokenSeparators: [",", " "],
createTag: function (tag) {
return {
id: tag.term,
text: tag.term,
// add indicator:
isNew : true
};
}
}).on("select2:select", function(e) {
if(e.params.data.isNew){
// append the new option element prenamently:
$(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>');
// store the new tag:
$.ajax({
// ...
});
}
});
[编辑]
(小更新:见下方 @Alex 评论)
只有用鼠标添加标签时,以上内容才有效。对于通过点击 space 或 comma 添加的标签,使用 change
事件。
然后你可以使用 data-select2-tag="true"
属性(新添加的标签)过滤 option
:
$('.select2').select2({
tags: true,
tokenSeparators: [",", " "]
}).on("change", function(e) {
var isNew = $(this).find('[data-select2-tag="true"]');
if(isNew.length && $.inArray(isNew.val(), $(this).val()) !== -1){
isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
$.ajax({
// ... store tag ...
});
}
});
关于javascript - 用于创建新标签的 Select2 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28656977/