0

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.

3
  • 1
    Have you tried calling $("#layout_select").select2(); again after hidding its options ?
    – Brewal
    Nov 13, 2019 at 16:30
  • No unfortunately nothing is working even the $("#layout_select").children('option').hide(); . How to calling again?
    – mik_assad
    Nov 13, 2019 at 16:35
  • Maybe you could check this answer and add a disabled attribute instead of hidding your options.
    – Brewal
    Nov 13, 2019 at 16:45

1 Answer 1

2

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>

2
  • Thank you so much, that solved my problem. Saved my day.
    – mik_assad
    Nov 13, 2019 at 20:27
  • @mik_assad You can accept this answer then ;)
    – Brewal
    Nov 13, 2019 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.