jQuery Select2 - 如何隐藏 Select2 Optgroup

Posted 2023-05-07

【中文标题】jQuery Select2 - 如何隐藏 Select2 Optgroup

【英文标题】：jQuery Select2 - How to hide Select2 Optgroup

【发布时间】：2019-12-18 18:45:10

【问题描述】：

我有一个“Select2”选择，我试图在其中隐藏选择 optgroup 及其选项，但是这没有发生。

隐藏选项和optgroups的CCS如下：

.select2-results .select2-disabled,
    .select2-results__option[aria-disabled=true] 
        display: none;
    
.select2-results .select2-disabled,
    .select2-results__group[aria-disabled=true] 
        display: none;
    

但是，虽然选项被隐藏，但“OptGroups”并没有以同样的方式隐藏。 这里使用的 JQuery 是：

jQuery('#btnSubmit').click(function () 
        var CityOption = jQuery('#City').find('option[value=Delhi], option[value=Bangalore]');
        var CityOptionGroup = jQuery('#City').find('optgroup[value=North], optgroup[value=South]');
        jQuery(CityOption).prop('disabled', 'true');
        jQuery(CityOptionGroup).prop('disabled', 'true');
    );

我还看到在这个问题Select2: Hide certain optgroup dynamically 中提出了这个查询，其中有人建议使用数据数组源添加选项，但这也不允许您通过 jQuery 动态隐藏 OptGroup，因为我需要它。

在下面找到完整的代码：

jQuery(document).ready(function($) 
  jQuery('#City').select2(
    width: '100%'
  );

  jQuery('#btnSubmit').click(function() 
    var CityOption = jQuery('#City').find('option[value=Delhi], option[value=Bangalore], option[value=Chennai]');
    var CityOptionGroup = jQuery('#City').find('optgroup[value=North], optgroup[value=South]');
    console.log(CityOption, CityOptionGroup);
    jQuery(CityOption).prop('disabled', 'true');
    jQuery(CityOptionGroup).prop('disabled', 'true');
  );
);

.select2-results .select2-disabled,
.select2-results__option[aria-disabled=true] 
  display: none;


.select2-results .select2-disabled,
.select2-results__group[aria-disabled=true] 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Select City
<select id="City">
  <option></option>
  <optgroup value=West label="West">
    <option value="Mumbai">Mumbai</option>
  </optgroup>
  <optgroup value=North label="North">
    <option value="Delhi">Delhi</option>
  </optgroup>
  <optgroup value=South label="South">
    <option value="Bangalore">Bangalore</option>
  </optgroup>
</select>

<input id="btnSubmit" type="submit" value="Click to hide North & South" />

【参考方案1】：

对于碰巧遇到这个问题的其他人，经过大量挖掘，我发现这个问题已经在最新版本 4.0.8 中得到了解决：https://github.com/select2/select2/issues/3347

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

谢谢！！