javascript - 选择2 : Multiple select elements constrained

Question

我正在尝试实现某些目标，但我找不到/决定什么是最好的实现方法，所以我要问以前是否有人这样做过，或者 select2 是否内置了一些东西来实现目标我想要。

事情是这样的:我的 DOM 中有许多选择(多个)元素，比如说 5 个，它们都共享相同的选项，但是，如果其中一个选择选择了一个选项，我希望其他选择隐藏/删除/避免被选择，我想限制所有选择，以避免在 2 个不同的选择中选择相同的值。我并不是要求完整的代码解决方案，我只需要知道是否有人已经这样做了(如果是，最好将其共享，以便将来偶然发现此问题的开发人员可以看到解决方案)，或者 select2 是否有功能。

到目前为止我所做的是:

       $('.constrainedSelect').each(function(i, select) {    
            var selectedValue = $(select).select2("val");
            var options = $('#allOptions').find('option').clone();

            if (selectedValue.length !== 0) {
                options.each(function(i, option) {
                    if($(select).find('option[value="' + $(option).val() + '"]').length !== 1) {
                        $(select).append(option);
                    }
                });
            } else {
                options.push($("<option />", {value: e.choice.id.trim(), text: e.choice.text.trim()})[0]);
                $(select).html(options);
            }
        });

但这只是一个概念，而且确实有问题。

我正在使用的 select2 版本(并且需要使用，还没有时间在生产中更改它)是 版本:3.5.2 时间戳:2014 年 11 月 1 日星期六 14:43:36 EDT

提前致谢!

Answer 1

我找到了一个很好的方法来做到这一点，如果有人想知道如何做到这一点，我认为这是一个很好的方法，但我想看到评论，如果有人想改进我的答案，请随意复制代码并粘贴它在一个单独的答案中，如果方法变得更好，我会接受该答案。谢谢大家的帮助。

        var $selects = $(".constrainedSelects");
        $selects.on('change', function(e) {
            var selectedValues = $(this).select2('val');
            for (var i = 0; i < selectedValues.length; i++) {
                $selects.not(this).find("option[value='" + selectedValues[i] + "']").attr('disabled', true);
            }
        });

        $selects.on('select2-removed', function(e) {
            $selects.find("option[value='" + e.val + "']").attr('disabled', false);
        });

这是一个显示结果的 fiddle :http://jsfiddle.net/rv38f0v6/