代码之家 › 专栏 › 技术社区 › Hayden Passmore

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

jquery-select2 html jquery

Hayden Passmore · 技术社区 · 6 年前

我用的是 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 所以你可以去玩。

重建步骤:(这似乎不是在小提琴上发生的)

选择一个选项
添加自定义标记
选择其他选项
添加另一个自定义标记

编辑出于某种原因,它只发生在我试图实现此代码的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" />

我试图清除缓存,但它似乎不起作用。下面是一系列截图。第一个是在选择一个选项,然后在自定义选项中写入之后。然后第二个图像是单击自定义选项时出现的图像(单击自定义选项应添加该选项)。

更新我找到了破坏它的代码

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应用程序的跨站点脚本编写(它是由我的学院编写的,因此我不能完全理解它的功能)。

1 回复 | 直到 6 年前

Hayden Passmore 6 年前

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

但是试一次可以帮到你吗

<!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));
    }
};

此代码正在尝试解码导致冲突的“选择”框中的值。