在价值变化时隐藏 Select2 Optgroup

Question

我的 select 列表中有 2 个选项组，我试图在 select 车辆上显示一个选项组并隐藏其他选项组。

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>

我想要的是，当我 select "car" 时，它隐藏了 "bike" 的 optgroup，而当我 select "bike" 时，它隐藏了 optgroup的 "car"，有可能吗？

谢谢

Answer 1

您可以尝试监听所选选项的值并据此操作结果，例如：

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 2

如果您只是禁用选项而不是删除它们，可能会更好（并且对用户更友好）。这也由 Select2 本机支持，因此用户将无法 select 禁用的选项。

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 3

我创建了一个用于隐藏禁用的 optgroups 的 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 中的相关选项组必须禁用属性 **

在价值变化时隐藏 Select2 Optgroup

Hiding Select2 Optgroup on Change of Value

jquery

twitter-bootstrap

jquery-select2

jquery-select2-3