CODEWITHSUNDEEP
jqueryhtmljquery-select2
Hayden Passmore
Hayden Passmore

Reputation: 1155

Adding custom tags using select2 plugin clears the select box after adding more then 1 custom option

I am using the select2 plugin and I have ran into an issue. When adding more then one extra tag the entire select box will be cleared. This is happening with a multiple select so I want the ability to add multiple custom tags along with the additional options.

The following is my code.

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%' 
});

Has anyone else ran into this problem? Any help would be appreciated.

Here is a jSFiddle so you can have a play.

Steps to recreate: (This doesn't seem to happen in the fiddle)

  1. Select an option
  2. Add a custom tag
  3. Select another option
  4. Add another custom tag

Edit For some reason it is only happening in the web app I am trying to implement this code into. Below is the current plugins/scripts I am using and in this order (I am loading them in the head)

<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" />

I have tried clearing the cache and it doesn't seem to work. Below is a series of screenshots. The first one is after selecting an option and then writing in a custom option. Then the second image is what appears when clicking the custom option (Clicking the custom option is supposed to add the option).

Adding a custom option After clicking the custom option

Update I have found the code that is breaking it

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

This code is used to prevent cross site scripting across the web app (It was written by my college so I am not 100% across what it does).

Upvotes: 1

Views: 1738

Answers (1)

er-sho
er-sho

Reputation: 9771

Your jsfiddle and my below solution tends to be the same.

But try once may it help you

<!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>

Edit 25/7/2018 If anyone else runs into this is the problem is conflicting javaScript files specifically this code. I would suggest completely removing this code altogether or commenting out the following lines;

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

This code is trying to decode the values inside the select box which is causing the conflicts.

Upvotes: 4

Related Questions