Question

我正在努力实现某些目标而我无法找到/决定什么是最好的方法，所以我会问是否有人之前做过这个或者如果select2有内置的东西以实现什么我想要。

继承人：我的DOM中有多个select（多个）元素，比方说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版本（并且需要使用，暂时无法在生产中更改它）Version: 3.5.2 Timestamp: Sat Nov 1 14:43:36 EDT 2014

提前致谢！

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);
        });

这是一个显示结果的小提琴：http://jsfiddle.net/rv38f0v6/

Answer 2

请看看这是否有帮助！这是一个jquery验证方法，可以避免在不同的选择框中使用相同的值。

 $.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

 $(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);
});

Select2：受限制的多个选择元素

3 个答案: