Select2：多个 select 元素受限

Question

我正在努力取得一些成就，但我做不到 find/decide 最好的方法是什么，所以我想问问以前是否有人这样做过，或者 select2有一些内置的东西来实现我想要的。

事情是这样的：我的 DOM 中有许多 select（多个）元素，比方说 5 个，它们都共享相同的选项，但是，如果其中一个 selects 有一个选项 selected，我希望其他人 hide/remove/avoid 被 selected，我想限制所有 selects 以避免相同值 select 在 2 个不同的 select 中编辑。我不要求完整的代码解决方案，我只需要知道是否有人已经这样做了（如果是，最好将其共享以便未来偶然发现此问题的开发人员可以看到解决方案），或者 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 版本（并且需要使用，还没有时间在生产中更改它）是 Version: 3.5.2 Timestamp: Sat Nov 1 14:43:36 EDT 2014

提前致谢！

Answer 1

 $(document).on('change', '.constrainedSelect', function() {
    var changedSelect = $(this);
    $(".constrainedSelect").not(changedSelect).select2("val", "").select2("enable", false)
});

我认为像这个事件侦听器这样的东西会处理它。它确保所有其他的 val 为空，然后禁用它们，因此无法从中选择它们。

这个怎么样：

Working Fiddle

//setup trackign array and block duplicate selections
var selectedIds = [];
 $(document).on('select2-selecting', '.constrainedSelect', function(event) {
    var idx = $.inArray(event.val, selectedIds);
    if(idx === -1) {
        selectedIds.push(event.val);
    } else {
        event.preventDefault();
    }
});

//remove selected item from our tracking array
 $(document).on('select2-removed', '.constrainedSelect', function(event) {
    var idx = $.inArray(event.val, selectedIds);
    selectedIds.splice(idx,1);
});

Answer 2

请看看这是否有帮助！这是一种 jquery 验证方法，可以避免在不同的 select 框中出现相同的值。

 $.validator.addMethod("valOption", function(value, element) {
         var curValue,
             allElems,
             counter,
             totalCount = 0;

         curValue = value;
         allElems = $('#myPage select');
         for (counter = 0; counter < allElems.length; counter = counter + 1) {
             if (curValue === allElems.eq(counter).val()) {
                 totalCount = totalCount + 1;
             }
         }
         if (totalCount === 1) {
             return this.optional(element) || (true);
         } else {
             return (false);
         }
     }, "Please select different option");

Answer 3

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

        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/

Select2：多个 select 元素受限

Select2: Multiple select elements constrained

javascript

jquery

jquery-select2