Select2：动态隐藏某些 optgroup

Posted 2023-05-07

【中文标题】Select2：动态隐藏某些 optgroup

【英文标题】：Select2: Hide certain optgroup dynamically

【发布时间】：2018-06-13 05:20:57

【问题描述】：

我需要有条件地隐藏/显示某个选项组 (<optgroup>)，我已经尝试了这个问题的最佳解决方案 - Select2: Hide certain options dynamically

它隐藏了每个选项（根据需要），但组标题保持可见，尽管它没有子项。如何隐藏select2中的整个选项组？

【参考方案1】：

我认为您可以在 Select2 中禁用 <optgroup> 仅使用数据数组源，而不是使用 html 中的选项。

在 Select2 github repo 上查看问题：

https://github.com/select2/select2/issues/4876 https://github.com/select2/select2/pull/5035

这里是一个 sn-p，它举例说明了这两种方法：

var data = [
  text: 'group1',
  children: [
    id: '1',
    text: 'option 1'
  , 
    id: '2',
    text: 'option 2',
    disabled: false,
  , 
    id: '3',
    text: 'option 3',
    disabled: true,
  ]
,

  text: 'group2',
  disabled: true,
  children: [
    id: '4',
    text: 'option 4',
    disabled: true,
  , 
    id: '5',
    text: 'option 5'
  ]
];

$(document).ready(function() 
  $('#test').select2(  data: data, );
  $('#test2').select2();
);

var group2Disabled = true;

toggleGroup2 = function() 
	group2Disabled = !group2Disabled;
  console.log("toggleGroup2", group2Disabled);
  var gr2 = data.find(findGroup2);
  gr2.disabled = !gr2.disabled;
  $('#test').empty().select2(data:data).trigger("change");


function findGroup2(el)  
    return el.text === 'group2';

select 
  width: 40%;

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

<label>Select List #1 (data)</label>
<select id="test"></select>
<button onclick="toggleGroup2()">toggle disable Group2</button>

<br><br><br>

<label>Select List #2 (html)</label>
<select id="test2">
  <optgroup label="group1">
    <option>option 1</option>
    <option>option 2</option>
    <option disabled="true">option 3</option>
  </optgroup>
  <optgroup label="group2" disabled="true">
    <option disabled="true">option 4</option>
    <option>option 5</option>
  </optgroup>
</select>

或者你可以查看这个 jsfiddle：https://jsfiddle.net/beaver71/u0jekg44/

【讨论】：

但是如何显示/隐藏optgroup？我想也许我可以添加一些 CSS 以不显示禁用 options 和 optgroups...

检查我的小提琴更新：选择列表#1 在禁用时不显示 optgroup2（尝试左侧的按钮）。使用 CSS...