基于先前选择的select2多选择筛选器选项

Question

我正在实现一个select2多重选择，以在多个能力之间进行选择。能力有两个稍微不同的估价尺度。

假设“编程”、“通用问题解决”和“速度”使用Scale1，而“智能”、“变更预测”和“成本分析”使用Scale2。我希望我的select2一开始显示所有的6个选择，但一旦我选择其中之一，进一步的选择只允许使用相同的评估尺度的能力。

我怎样才能做到这一点？

Answer 1

我就是这样解决的。

我的select2是在现有的带有选项的select上初始化的。因此，首先，我向选项添加了一个新属性，该属性表示要筛选的字符串(在我的示例中是'scale'，在注释中提供的示例是"animalGroup")。

然后，我在原始选择上设置了一个更改事件侦听器：

select.on('change', function () {
        var currItems = $(this).val();

        $(this).find('option').prop('disabled', false);

        if (!(currItems == null || currItems === false)) {

            var currScale = $(this).find("option[value='" + currItems[0] + "']").attr('scale');

            $(this).find('option').prop('disabled', false);
            $(this).find("option[scale='" + currItems[0] + "']").prop('disabled', false);;


            $(this).parent().find('option').each(function () {
                if (($(this).attr('scale') != currScale)) $(this).prop('disabled', true);
            });


        }

        $(this).select2({
            allowClear: true,
        });
    });

In启用所有选项，然后，如果至少选择一个选项，则禁用使用不同比例(或animalGroup)的所有选项。最后，重新初始化select2以捕获已启用/禁用的更改。