Hide Options in Select2 Multi Select

How to hide options in a dropdown using select2 plugin?

Use templateResult: its the solution to select what options you want to show/or hide. In this sample, i dont want to show Apple, Cat and ViewExposure.

$("#example").select2({
    templateResult: function(option, container) {
        if ($(option.element).attr("data-select2-id") == "not apply"){ 
          $(container).css("display","none");
        }

        return option.text;
    }
});

//put this line in css file  to avoid empty line in search
//not necessary with templateResult
/*
li.select2-results__option:empty {
    display: none;
}
*/

<html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
    <option data-select2-id='not apply' value="1">Apple</option>
    <option value="Bat">Bat</option>
    <option data-select2-id='not apply' value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Elephant">Elephant</option>
    <option data-select2-id='not apply' value="ViewExposure">ViewExposure</option>
    <option value="DummyData">Dummy - Data</option>
    <option value="Dummy-Data">Dummy-Data</option>
    <option value="Dummy:Data">Dummy:Data</option>
    <option value="Dummy(Data)">Dummy(Data)</option>    
</select>

  </body>
</html>

Hide select2 multi search box

Can you do something like this ? Not sure about your usercase. But I will suggest to destroy the select and then hide. And later again create the instance and show.

$("#one").change(function() {

    if($(this).val() == '3')
    {
        $('.other').select2('destroy');
      $('.other').hide();
    } else {
        $(".other").select2({
          tags: true
      });
        $('.other').show();
    }
});
  $(document).ready(function() {
      $(".other").select2({
          tags: true
      });
  });

<html>
<style type="text/css">
.other {
    display: none !important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

          <select class="one" name="one" id="one">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            
         </select>
         <br>
  
<br>


    <select class="other" name="other" multiple="multiple" style="width: 100px;">
  <option value="AL">Sample1</option>
  <option value="WY">Sample2</option>
    </select>

  </html>

Hide Options On Search with jQuery Select2

I figured it out. Since the value of the fields were being used as the ID for the field in the back end, I was able to append the ID with "-other-color" so I had a way of selecting it in CSS which allowed to to surpass the flickering.

.select2-results__options li[id*="-other-color"][aria-selected="false"] ~ li[id*="-other-color"][aria-selected="false"]{
    display:none!important;
}

Since there are more children in the list than just other color options, you need to use the tilde selector to select everything after the selector based on the attributes being selected.

Hide Options in Select2 Multi Select

How to hide options in a dropdown using select2 plugin?

Hide select2 multi search box

Hide Options On Search with jQuery Select2

Related Topics

Leave a reply