CODEWITHSUNDEEP
javascriptjqueryselectjquery-select2
mik_assad
mik_assad

Reputation: 21

Select2 hide options with jquery

I need to show/hide options on one select drop down dependant on another select drop down option.

My code:

$(document).ready(function() {
   $("#layout_select").select2();
   $("#column_select").select2();

   $("#layout_select").children('option:gt(0)').hide();
   $("#column_select").change(function() {
      $("#layout_select").children('option').hide();
      $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
   })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />


<select name="column_select" id="column_select">
   <option value="col1">1 column</option>
   <option value="col2">2 column</option>
   <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
  <option value="col1">none</option>

  <option value="col2_ms">layout 1</option> 
  <option value="col2_sm">layout 2</option>

  <option value="col3_mss">layout 3</option>
  <option value="col3_ssm">layout 4</option>
  <option value="col3_sms">layout 5</option>
 </select>

When I change the selection of my first 'column_select', I want to change my 'layout_select' options using hide / show

Something like this StackOverflow issue

Note: I am using Select2.

In my implementation I did exactly as the example, but as I am using select2 scrpit does not work.

Does anyone know how to do the same thing, knowing that I'm using select2? Without using .remove () and .append (), but exactly as in the example giving hide / show.

Upvotes: 0

Views: 986

Answers (1)

Brewal
Brewal

Reputation: 8189

As suggested in this answer, you could disable the options instead of hiding them and use CSS to hide the options if you want (they will be grayed out otherwise).

You will have to call $("#layout_select").select2(); at the end of the change event and call $("#column_select").change(); to trigger the change event on page load.

$(document).ready(function() {
   $("#layout_select").select2();
   $("#column_select").select2();

   $("#layout_select").children('option:gt(0)').hide();
   $("#column_select").change(function() {
      $("#layout_select").children('option').prop('disabled', true);
      $("#layout_select").children("option[value^=" + $(this).val() + "]").prop('disabled', false);
      $("#layout_select").select2();
   })
   $("#column_select").change();
});
.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />


<select name="column_select" id="column_select">
   <option value="col1">1 column</option>
   <option value="col2">2 column</option>
   <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
  <option value="col1">none</option>

  <option value="col2_ms">layout 1</option> 
  <option value="col2_sm">layout 2</option>

  <option value="col3_mss">layout 3</option>
  <option value="col3_ssm">layout 4</option>
  <option value="col3_sms">layout 5</option>
 </select>

Upvotes: 2

Related Questions