Jquery 使用select2插件添加自定义标记将在添加多个自定义选项后清除选择框

我正在使用插件，我遇到了一个问题。添加多个额外标记时，整个选择框将被清除。这是发生在一个多选择，所以我希望能够添加多个自定义标记以及其他选项

下面是我的代码

html

还有其他人遇到过这个问题吗？任何帮助都将不胜感激

这是一个游戏，你可以玩一玩

重建步骤：这似乎不会在小提琴中发生

选择一个选项 添加自定义标记 选择另一个选项 添加另一个自定义标记 出于某种原因，编辑只发生在我试图将此代码实现到的web应用程序中。下面是我正在使用的当前插件/脚本，并按照这个顺序将它们加载到头部

<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> <!--Jquery-->
<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" /><!--Bootstrap-->
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script><!--Bootstrap-->
<script type="text/javascript" src="Scripts/sweetalert2.min.js"></script><!--https://sweetalert2.github.io/-->
<link href="css/sweetalert2.min.css" rel="stylesheet" /><!--https://sweetalert2.github.io/-->
<link rel="stylesheet" href="Scripts/cropper-master/dist/cropper.css" /><!--https://fengyuanchen.github.io/cropper/--> 
<link href="css/app_1.min.css" rel="stylesheet" /><-- Googles Material Design -->
<link href="css/app_2.min.css" rel="stylesheet" /><-- Googles Material Design --></script>
<!--<script type="text/javascript" src="Scripts/fast-select/fastselect.standalone.js"></script>
<link href="Scripts/fast-select/fastselect.css" rel="stylesheet" />-->
<script src="Scripts/select2/select2.js"></script>
<link href="Scripts/select2/select2.min.css" rel="stylesheet" />

---

此代码用于防止跨web应用程序的跨站点脚本编写。它是由我的学院编写的，因此我对它的功能不是100%了解。

您的JSFIDLE和我下面的解决方案往往是相同的

但是试一下也许对你有帮助

$'。选择2。选择2{ 资料：[钢琴、长笛、吉他、鼓、摄影]， 标签：是的， 最大选择长度：10， 标记分隔符：['，'，'']， 占位符：选择或键入关键字 };

---

您的JSFIDLE和我下面的解决方案往往是相同的

但是试一下也许对你有帮助

$'。选择2。选择2{ 资料：[钢琴、长笛、吉他、鼓、摄影]， 标签：是的， 最大选择长度：10， 标记分隔符：['，'，'']， 占位符：选择或键入关键字 };

---

我试过你的小提琴，加了10多个标签，一切似乎都很好。你用的是什么浏览器？我用的是chrome。你按照步骤重新创建了吗？是的，我完全按照你说的做了，一个选项和一个自定义标记交替进行。好吧，对不起，我没意识到它现在在我的小提琴上起作用了。但是，在我试图将此代码集成到的web应用程序中，它似乎不起作用。我将更新我的问题，并显示我正在使用的当前插件，可能有人知道可能存在冲突。可能是你知道的，它不会有用，但。。。试着清理缓存。我试着用你的小提琴添加了10多个标签，看起来一切正常。你用的是什么浏览器？我用的是chrome。你按照步骤重新创建了吗？是的，我完全按照你说的做了，一个选项和一个自定义标记交替进行。好吧，对不起，我没意识到它现在在我的小提琴上起作用了。但是，在我试图将此代码集成到的web应用程序中，它似乎不起作用。我将更新我的问题，并显示我正在使用的当前插件，可能有人知道可能存在冲突。可能是你知道的，它不会有用，但。。。尝试清理缓存。您好，谢谢您的回答。当我对您的代码进行沙箱处理时，它似乎工作正常，但似乎无法解决冲突代码的问题。现在，我刚刚删除了阻止它的附加JavaScript文件引用。我编辑了您的答案，并添加了html解码代码是破坏代码的原因。@Hayden Passmore，感谢您改进我的答案，很高兴听到你已经摆脱了你的问题：嗨，谢谢你的回答，当我对你的代码进行沙箱测试时，它似乎工作得很好，但是它似乎无法解决代码冲突的问题。现在，我刚刚删除了阻止它的附加JavaScript文件引用。我编辑了您的答案，并添加了html解码代码，这是破坏代码的原因。@Hayden Passmore，感谢您改进了我的答案，很高兴听到您解决了问题：

$(".multiSelect").select2({
  tags: true,
  tokenSeparators: [',', ' '],
  width: '100%' 
});

<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> <!--Jquery-->
<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" /><!--Bootstrap-->
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script><!--Bootstrap-->
<script type="text/javascript" src="Scripts/sweetalert2.min.js"></script><!--https://sweetalert2.github.io/-->
<link href="css/sweetalert2.min.css" rel="stylesheet" /><!--https://sweetalert2.github.io/-->
<link rel="stylesheet" href="Scripts/cropper-master/dist/cropper.css" /><!--https://fengyuanchen.github.io/cropper/--> 
<link href="css/app_1.min.css" rel="stylesheet" /><-- Googles Material Design -->
<link href="css/app_2.min.css" rel="stylesheet" /><-- Googles Material Design --></script>
<!--<script type="text/javascript" src="Scripts/fast-select/fastselect.standalone.js"></script>
<link href="Scripts/fast-select/fastselect.css" rel="stylesheet" />-->
<script src="Scripts/select2/select2.js"></script>
<link href="Scripts/select2/select2.min.css" rel="stylesheet" />

var originalVal = this.originalVal = $.fn.val;
$.fn.val = function (value) {
    if (typeof value == 'undefined') {
        return originalVal.call(this);
    }
    else {
        return originalVal.call(this, SASWidgets.HTMLDecodeString(value));
    }
};