JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="category">

                            <div class="col-12 pr-0 pl-0 pt-2 formationaffect selectedall" data-select2-id="formationS">

                                <select data-placeholder="SĂ©lectionner" class="js-select2 small-select select2-hidden-accessible selectcategory selectgetval" data-minimum-results-for-search="Infinity" multiple  id="select-category" tabindex="-1" aria-hidden="true">
                                    <option  data-id-select="1" value="all">TOUS</option>
                        
                  <option class="checkbox" value="1" data-badge="" >categorie1</option>
                                    
                  <option class="checkbox" value="2" data-badge="" >categorie2</option>   
                                </select>
                            </div>

                        </div>

JavaScript

$(document).on('change', '.selectedall', function() {

    var s = $("#select-category").select2('val');
    //console.log(items);
    if(s=="all"){
        //console.log("cc");
        setTimeout(function(){
            $(".select2-results__option").attr("aria-selected",true);
        }, 100);

    }
   $(".select-filter").select2({ minimumResultsForSearch: Infinity});
});