我使用jQuery
Select2(v4)插件作为标签选择器.
我想要在select元素中创建一个新标签并触发ajax请求来存储新的标签.我发现有createTag事件,但这似乎每当一个字母被输入到select2元素时都会触发.如我的小提琴:http://jsfiddle.net/3qkgagwk/1/
有没有类似的事件,只有在新标签输入完成时才会触发?即它被一个包围它的灰色框包围.
解决方法
我不能找到任何本机方法不幸的是.但是,如果您对简单的“解决方法”感兴趣,也许这样可以使您更加接近:
$('.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({ // ... }); } });
[编辑]
只有使用鼠标添加标签,才能使用上述功能.对于通过按空格或逗号添加的标签,请使用更改事件.
然后,您可以使用data-select2-tag =“true”属性(新添加的标签)过滤选项:
$('.select2').select2({ tags: true," "] }).on("change",function(e) { var isNew = $(this).find('[data-select2-tag="true"]'); if(isNew.length){ isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>'); $.ajax({ // ... store tag ... }); } });