select2 基于先前选择的多选过滤器选项

Question

我正在实施 select2 多选以在多种能力之间进行选择。能力有两个略有不同的估价尺度。

假设“编程”、“一般问题解决”和“速度”使用 Scale1； “情报”、“变革倾向”和“成本分析”使用 Scale2。我希望我的 select2 一开始显示所有 6 个选项，但是一旦我选择了其中一个选项，就只允许对使用相同评估等级的能力进行进一步选择。

我怎样才能做到这一点？

Answer 1

我是这样解决的。

我的 select2 在现有的 select 上初始化并带有选项。因此，首先我向选项添加了一个新属性，代表我要过滤的字符串（在我的例子中是 'scale'，在我在评论中提供的示例中是 "animalGroup"）。

然后我在原来的 select:

上设置了一个 change 事件监听器

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 启用所有选项，然后，如果至少一个选项被 selected，则禁用所有使用不同比例（或 animalGroup）的选项。最后 select2 被重新初始化以捕捉 enabled/disabled.

中的变化

select2 基于先前选择的多选过滤器选项

select2 multiselect filter options based on previous choices

jquery

jquery-select2