Select2:动态隐藏某些optgroup
Select2:动态隐藏某些optgroup
提问于 2018-01-03 14:06:11
我需要有条件地隐藏/显示某个选项组()，并且我已经尝试了这个问题的最佳解决方案-- Select2:动态隐藏某些选项
它隐藏了每个选项(视需要而定)，但是组标题仍然是可见的，尽管它没有子项。如何在select2中隐藏整个选项组
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-04 08:08:42
我认为您可以仅使用数据源在Select2中禁用Select2，而不能在Select2中使用选项。
参见关于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>
或者你可以检查一下这把小提琴：https://jsfiddle.net/beaver71/u0jekg44/
Stack Overflow用户
发布于 2022-04-15 12:18:08
对于任何无意中发现此问题的人，不，您不需要更改数据源就可以禁用ο组。
就像Mateus所写的，css用来隐藏禁用选项和optgroup：
.select2-results__option[aria-disabled=true]
{
display: none;
}和javascript逻辑来禁用optgroup，如果它们没有启用选项：
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)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48078990
复制相关文章
相似问题
腾讯云开发者
