jQuery addClass example

Change class name on click in jQuery

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<select class="js-example-basic-single" name="state" multiple="multiple">
  <option value="AL">test</option>
  <option value="WY">test1</option>
  <option value="ww">test2</option>
  <option value="eeY">test3</option>
  <option value="tt">test4</option>
</select>

CSS

select{width:100%;}

.select2-results__option[aria-selected]{padding-left:20px;position: relative;}
.select2-results__option[aria-selected]:after,.select2-results__option[aria-selected]:before{
  left: 4px;
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid;
  position: absolute;
  top: 9px;
}

.select2-results__option[aria-selected]:before{
  transform: rotate(49deg);
  width: 2px;
  height: 6px;
  left: 8px;
  top: 10px;
  border-left-color: transparent;
  border-top-color: transparent;
}
.select2-results__option[aria-selected]:before{
  transform: rotate(49deg);
  width: 0px;
  height: 0px;
  opacity:0;
  left: 7px;
  top: 14px;
  border-left-color: transparent;
  border-top-color: transparent;
}

.select2-results__option[aria-selected=true]:before{
  animation:check 0.2s forwards;
}

@keyframes check{
  0%{opacity: 1;width: 0;height: 0;top: 14px;left: 7px;}
  50%{opacity: 1;width: 2px;height: 0px;top: 14px;left: 7px;}
  100%{opacity: 1;height: 6px;width: 2px;top: 10px;left: 8px;}
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #5897fb;
}

.select2-container{margin-top: 24px;}

.select2-selection--multiple[aria-expanded="true"] .select2-search.select2-search--inline{
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    border: 1px solid;
}

JavaScript

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2({
    closeOnSelect: false
    });
});