select2 添加带有确认框的新标签

Posted 2023-05-07

【中文标题】select2 添加带有确认框的新标签

【英文标题】：select2 to add new tags with confirmation box

【发布时间】：2014-09-27 15:02:27

【问题描述】：

在Select2 我有基本的标记功能工作。标记系统在插入项目页面中工作，我可以在其中使用存储在数据库中并由 AJAX 调用的某些预定义标记来标记项目，也可以在更新项目页面中使用相同的机制来添加在标签字段中更新当前存储的标签。

我想要这样，如果当前不存在标签，用户将收到一个确认框，询问他们是否要添加新标签，然后点击确定该标签将存储在数据库中。 Select2 还应该有几秒钟的缓冲时间来赶上查找标签，否则它可能会产生重复？

我已经阅读了一些 here 的内容，其中显示了如何执行 jquery 部分，尽管对于我的目的来说它是不完整的。谁能阐明我如何做到这一点？我不是在寻找完整的答案，而只是在寻找指导。

【参考方案1】：

看看这个问题：How do I fire a new ajax on select2 new /remove tag event?

在你的情况下，使用你的小提琴，你可以使用类似的东西：

$('#tags').on("change", function(e)
    if (e.added) 
        if (/ \(new\)$/.test(e.added.text)) 
           // A new tag was added
           // Prompt the user
           var response = confirm("Do you want to add the new tag "+e.added.id+"?");

           if (response == true) 
              // User clicked OK
              console.log("Sending the tag to the server");
              $.ajax(
                   type: "POST",
                   url: '/someurl&action=addTag',
                   data: id: e.added.id, action: add,    
                   error: function () 
                      alert("error");
                   
               );
            else 
                // User clicked Cancel
                console.log("Removing the tag");
                var selectedTags = $("#tags").select2("val");
                var index = selectedTags.indexOf(e.added.id);
                selectedTags.splice(index,1);
                if (selectedTags.length == 0) 
                    $("#tags").select2("val","");
                 else 
                    $("#tags").select2("val",selectedTags);
                
           
        
    
);

Draft fiddle here.

【讨论】：

非常有趣！并感谢链接的问题。在 php 脚本中，哪些变量被发送到/someurl&action=addTag？我显然需要有这个词。

哦，没关系，我没有关注数据。我注意到的一个错误是，如果您取消确认，则会出现一个错误，您仍然可以看到该框（在您的小提琴中）。你知道为什么会这样吗？

嗯。如果您使用的是旧浏览器，那么删除标签的代码可能不起作用 - 您必须使用其他代码通过 javascript 从数组中删除元素。

我正在使用当前版本的 chrome。你在用什么？

啊哈 - 问题是当新标签是选择中的唯一标签时。固定。