我正在使用select2插件和我遇到了一个问题。当添加超过一个额外标签时，整个选择框将被清除。这是通过多重选择发生的，因此我希望能够添加多个自定义标签以及其他选项。
以下是我的代码。
html
<select multiple="multiple" id="inputServices" class="multiSelect" name="services">
<option value="SA">SA</option>
<option value="NSW">NSW</option>
<option value="ACT">ACT</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="WA">WA</option>
<option value="NZ - South">NZ - South</option>
<option value="NZ - North">NZ - North</option>
</select>
Javascript
$(".multiSelect").select2({
tags: true,
tokenSeparators: [',', ' '],
width: '100%'
});
还有其他人遇到过这个问题吗？任何帮助将不胜感激。
这是一个jSFiddle这样你就可以玩了。
重新创建的步骤:(这似乎不会在 fiddle 中发生)
- 选择一个选项
- 添加自定义标签
- 选择其他选项
- 添加另一个自定义标签
编辑由于某种原因，它只发生在我尝试实现此代码的网络应用程序中。下面是我正在使用的当前插件/脚本，并按此顺序(我将它们加载到头部)
<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));
}
};
此代码用于防止跨 Web 应用程序的跨站点脚本编写(它是由我的大学编写的，因此我不能 100% 理解它的作用)。
最佳答案
您的 jsfiddle 和我的以下解决方案往往是相同的。
但是尝试一次也许会对你有帮助
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
</head>
<body>
<select class="form-control select2" multiple="multiple" style="width: 100%;"></select>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script>
$('.select2').select2({
data: ["Piano", "Flute", "Guitar", "Drums", "Photography"],
tags: true,
maximumSelectionLength: 10,
tokenSeparators: [',', ' '],
placeholder: "Select or type keywords"
});
</script>
</body>
</html>编辑2018年7月25日 如果其他人遇到此问题，则问题是 javaScript 文件冲突 this code 。我建议完全删除此代码或注释掉以下几行；
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));
}
};
此代码尝试解码选择框中的值，这导致了冲突。
关于jquery - 使用 select2 插件添加自定义标签会在添加超过 1 个自定义选项后清除选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51413216/