我用select2
实现了两个自定义函数:
1.选择父节点,将父节点添加到选定节点并禁用子节点。
1.取消选择父节点,从选定节点中删除并启用子节点。
这是有效的,除非按以下顺序添加和删除父节点:
1.选择父
1.打开新出现的选项(您可以看到子节点已禁用)
1.单击搜索框外部,关闭出现的选项
1.取消选择父项
1.再次打开新出现的框(子节点仍处于禁用状态)
相反,如果步骤2和步骤3没有完成,它就起作用了。
1.选择父
1.取消选择父项
1.打开新兴选项(您可以看到子节点已重新启用)
请看一个工作示例:
const tags = [{
'id': 1,
'text': 'Parent 1',
'children': [{
'id': 'tag11',
'text': 'Tag 11'
},
{
'id': 'tag12',
'text': 'Tag 12'
}, {
'id': 'parent1',
'text': 'Parent 1'
},
],
},
{
'id': 2,
'text': 'Parent 2',
'children': [{
'id': 'tag21',
'text': 'Tag 21'
},
{
'id': 'tag22',
'text': 'Tag 22'
},
{
'id': 'parent2',
'text': 'Parent 2'
},
],
}
];
$(document).ready(function() {
const selectField = $('#target');
selectField.select2({
width: '300px',
templateResult: function(option) {
if (option.element && (option.element).hasAttribute('hidden')) {
return null;
}
return option.text;
}
});
selectField.on('select2:open', function(e) {
let allOptionsStart = this.options;
$('#select2-target-results').on('click', function(event) {
let allOptions = [];
$.each(allOptionsStart, (key, option) => {
allOptions[option.value] = option;
});
const data = $(event.target).html();
const selectedOptionGroup = data.toString().trim();
let selectedOptionGroupId = '';
$.each(tags, (key, tag) => {
if (selectedOptionGroup.toString() === tag.text.toString()) {
$.each(tag.children, (key, child) => {
if (selectedOptionGroup.toString() === child.text) {
selectedOptionGroupId = child.id;
}
const jTag = $(allOptions[child.id]);
if (Object.keys(jTag).length > 0) {
if (!jTag[0].hidden) {
jTag[0].disabled = true;
}
}
});
}
});
$('select').select2({
width: '300px',
templateResult: function(option) {
if (option.element && (option.element).hasAttribute('hidden')) {
return null;
}
return option.text;
}
});
event.stopPropagation();
let options = selectField.val();
if (options === null || options === '') {
options = [];
}
options.push(selectedOptionGroupId);
selectField.val(options);
selectField.trigger('change'); // Notify any JS components that the value changed
selectField.select2('close');
});
});
selectField.on('select2:unselecting', function(e) {
let allOptions = [];
$.each(this.options, (key, option) => {
allOptions[option.value] = option;
});
const unselectedGroupText = e.params.args.data.text;
$.each(tags, (key, tag) => {
if (unselectedGroupText === tag.text) {
$.each(tag.children, (key, childTag) => {
const jTag = $(allOptions[childTag.id]);
if (Object.keys(jTag).length > 0) {
if (!jTag[0].hidden) {
jTag[0].disabled = false;
}
}
});
}
});
});
});
li.select2-results__option strong.select2-results__group:hover {
background-color: #ddd;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<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.3/js/select2.min.js"></script>
<select id="target" data-placeholder="Select an option" multiple='multiple'>
<optgroup label="Parent 1">
<option value="tag11">Tag 11</option>
<option value="tag12">Tag 12</option>
<option value="parent1" hidden>Parent 1</option>
</optgroup>
<optgroup label="Parent 2">
<option class="tag21">Tag 21</option>
<option class="tag22">Tag 22</option>
<option value="parent2" hidden>Parent 2</option>
</optgroup>
</select>
jsfiddle(以防万一):https://jsfiddle.net/ivantxo/bzu2xmp9/151/
有人能帮我看看出了什么问题吗?
这在两种情况下都应该起作用。
谢谢.
2条答案
按热度按时间nuypyhwy1#
一个解决方案是向选项中添加一些类,以使标识更容易。
我将select2插件赋值放在一个函数中,以便于重用,在本实现中,select2 destroy方法将用于重新应用插件并更新显示。
出于实际原因,我以delegated的方式在optgroups中使用了点击监控。当click事件发生时,它将select2组件的标签与
optgroup
的标签进行比较,以禁用和删除optnormal类的子选项的选择,以及选择opthidden类的option
。selectField.on('select2:unselecting', function(e) {
允许你用e.params.args.data.element
找出从选择中删除了哪个元素,只需检查它是否是opthidden类的选项来获取父optgroup
,并用optnormal类重新启用子选项。q0qdq0h22#
我已经想通了这么多。我希望它会有所帮助。