Select2 demo

by thomas_david88

HTML

<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/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible"  tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="25">sport</option>
<option value="17" data-select2-id="26">allemand</option>
<option value="18" data-select2-id="27">Musci</option>
<option value="29" data-select2-id="28">film</option>
<option value="35" data-select2-id="29">angallis</option>
</select>

<select id="custom_form_names_subcategorie" multiple  class="js-select2 small-select addplaceholderslect select2-hidden-accessible" >
<optgroup label="sport" data-select2-id="33">
                <option value="2" data-select2-id="34">Dance classique</option></optgroup>
                <optgroup label="Musci"  data-select2-id="35">
                <option value="3" data-select2-id="36">Catégorie 4</option>
                <option value="4" data-select2-id="37">Rap</option></optgroup>
                <optgroup label="allemand"  data-select2-id="38">
                <option value="5" data-select2-id="39">Catégorie 4</option>
                </optgroup><optgroup label="film"  data-select2-id="40">
                <option value="7" data-select2-id="41">Catégorie 5</option></optgroup></select>

CSS

.select2.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection__rendered {
    padding: 5px 15px 0 15px;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: none;
    background-image: none;
    text-transform: uppercase;
    font-size: 13px;
}


.select2-container .select2-selection--single {
    height: 100% !important;
    border-radius: 15px !important;
}
.beforecheckbox  .select2-results__option[aria-selected=true]:before {
    content: "";
    color: #fff;
    background: url(../images/svg/check_active.png);
    border: 0;
    display: inline-block;
    padding-left: 3px;
}
.beforecheckbox  .select2-results__option[aria-selected=true]:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #fff;
    margin-right: 20px;
    vertical-align: middle;
    right: 0;
    float: right;
}
.beforecheckbox .select2-results__option[aria-selected=false]:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: #b7b9cc solid 2px;
    background-color: #fff;
    margin-right: 20px;
    vertical-align: middle;
    right: 0;
    float: right;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before{
  background:red;
}
#custom_form_names_category{
  margin-bottom:50px !important;
}
.select2.select2-container{
    margin-bottom:50px !important;
}

JavaScript

$("#custom_form_names_category").on("change",function(){
    var selectedVal = $(this).find("option:selected" ).text();
		console.log(selectedVal);
$('#select2-custom_form_names_subcategorie-results > [aria-label="'+ selectedVal +'"]').show().siblings("li").css('display', 'none');
 
    });
     $(".js-select2").select2({
        closeOnSelect : false,
        allowClear: true,
        tags: true,
        dropdownCssClass: "beforecheckbox"

    });