Select2：动态隐藏某些optgroup

Question

我需要hide/show某个选项组（<optgroup>) conditionally and I've tried the top solution from this question - Select2: Hide certain options dynamically

它隐藏了每个选项（根据需要），但组标题仍然可见，尽管它没有 child 项。如何在 select2?

中隐藏整个选项组

Answer 1

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

查看 Select2 github 存储库上的问题：

下面是一个片段，它举例说明了这两种方法：

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/

Answer 2

您可以使用这个 .css 来隐藏选项和 optgoup

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

不要忘记在两个元素中添加 disabled="true" 属性。您还可以使用 JQuery ($(theOption).prop('disabled', true)).

动态设置此属性

Answer 3

对于偶然发现此问题的人，不，您不需要更改数据源来禁用 opt 组

如 Mateus 所写，css 隐藏禁用的选项和选项组：

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

和javascript禁用optgroups的逻辑，如果它们没有启用选项：

mySelect.find("optgroup").each(function(){
    let totalOptions = $(this).find("option").length
    let disabledOptions = $(this).find("option:disabled").length

    if( totalOptions == disabledOptions ) $(this).prop('disabled', true)
    else $(this).prop('disabled', false)
})

Select2：动态隐藏某些optgroup

Select2: Hide certain optgroup dynamically

hide

optgroup

jquery-select2

jquery-select2-4