1

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

4

3 回答 3

2

如果您只是禁用选项而不是删除它们,它可能会更好(并且对用户更友好)。Select2 本身也支持这一点,因此用户将无法选择禁用的选项。

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>

于 2015-04-05T21:10:18.140 回答
1

我创建了一个隐藏禁用 optgroup 的 hack:

$.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 是 jquery 插件:https ://github.com/pietrasiak/jquery.initialize

** select 中的相关 optgroup 必须禁用属性 **

于 2017-05-04T11:44:47.563 回答
0

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>

于 2015-04-04T00:03:08.030 回答