Hiding Select2 Optgroup on Change of Value

Question

I have 2 optgroup in my select list and i am trying to show one optgroup and hide other on selection of vehicle.

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        
        jQuery(this).select2();
      
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike">Bike</option>
</select>

<select id="car" name="car">
  <optgroup label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

All i want is, when i select "car" , it hides optgroup of "bike", and when i select "bike" , it hides optgroup of "car", is it possible ?

Thanks

Answer 1

It might be better (and slightly more user friendly) if you just disable the options instead of removing them. This is also natively supported by Select2, so the user will not be able to select an option that is disabled.

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        jQuery(this).select2();
    });

    jQuery('#vehicle').on('change', function() {
        if ($(this).val() == 'car') {
            $('#car-bike option').prop('disabled', true);
            $('#car-car option').prop('disabled', false);
        } else {
            $('#car-bike option').prop('disabled', false);
            $('#car-car option').prop('disabled', true);
        }

        // Tell Select2 to update the current selection
        // Some browsers (correctly) switch the selected option if it is disabled
        // Others don't, which is unfortunate
        $('#car').trigger('change');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike">Bike</option>
</select>

<select id="car" name="car">
  <optgroup id="car-bike" label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup id="car-car" label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

Answer 2

You could try listening for the value of the option selected and manipulate the results based on that, like for example:

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        
        jQuery(this).select2();

        $('#vehicle').change(function(){
           if($(this).val() == 'car'){ 
           $('#bike').remove();
          }
        });
      
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike" selected>Bike</option>
</select>

<select id="car" name="car">
  <optgroup id="bike" label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

Answer 3

I created a hack for hiding disabled optgroups:

$.initialize(".select2-results__option[role='group']", function(index, optionGroup)
    {
        let optGroupName = $(this).attr("aria-label");

        let select2ResultsId =$(this).closest("ul.select2-results__options").attr("id");

        if(select2ResultsId)
        {
            let ptrn = /^select2-([\w]+)-results/i;
            let res =ptrn.exec(select2ResultsId);

            if(res.length > 0)
            {
                let relSelect2Id = res[1];

                let relOptGroup= $("#" + relSelect2Id).find("optgroup[label='" +optGroupName +  "'][disabled]");

                if (relOptGroup.length)
                {
                    $(optionGroup).attr("disabled", "disabled");
                    $(optionGroup).attr("aria-disabled", "true");
                }
            }
        }
    });

Css:

.select2-results__option[aria-disabled=true],
.select2-results__option[disabled]
{display:none}

$.initialize is jquery plugin: https://github.com/pietrasiak/jquery.initialize

**Related optgroup in select must have attribute disabled **