如何去除Select2下拉多选框中的重复选项？

嘿，我来帮你搞定这个问题！你现在遇到的是用Select2实现多选下拉框时出现重复选项，自己写的去重代码又导致Select2失效的情况，下面给你两种实用的解决思路：

一、优先推荐：后端从源头去重（最优解） #

既然下拉框的选项是从模型绑定来的，那我们直接在后端就把重复的选项去掉，这样前端就不用额外处理，也不会影响Select2的初始化。

你可以在视图里修改循环逻辑，用LINQ的Distinct()方法对Name去重：

<div class="col-lg-3 col-sm-6">
    <div class="form-group">
        <select name="WhoAmIs" id="WhoAmIs" ng-model="data.WhoAmIs" class="form-control whoAmIDuplicates" multiple>
            @foreach (var whoamiall in Model.WhoAmI)
            {
                // 先提取唯一的Name值
                var uniqueNames = whoamiall.WhoAmIAll.Select(x => x.Name).Distinct();
                foreach (var name in uniqueNames)
                {
                    <option value="@name">@name</option>
                }
            }
        </select>
    </div>
</div>

这样生成的<option>本身就没有重复项，后续直接初始化Select2就完全没问题了，这是最稳妥的方式，避免前端额外处理的风险。

二、前端去重：先处理选项再初始化Select2 #

如果后端暂时不好修改，那就要调整前端代码的执行顺序——先删除重复的原始选项，再初始化Select2，这样就不会破坏Select2的内部状态了。

你的问题出在之前的代码可能是在Select2初始化之后执行的，这时候Select2已经生成了自己的UI结构，和原始的<select>元素是分离的，修改原始option不会同步到Select2，反而会导致插件失效。

修改后的前端代码：

// 第一步：先处理重复的option
$(".whoAmIDuplicates").each(function() {
    var seenValues = {};
    $(this).find("option").each(function() {
        var optionValue = $(this).val();
        if (seenValues[optionValue]) {
            // 如果已经出现过这个值，删除当前option
            $(this).remove();
        } else {
            // 标记这个值已经出现过
            seenValues[optionValue] = true;
        }
    });
});

// 第二步：再初始化Select2插件
jQuery("#WhoAmIs").select2({ 
    maximumSelectionLength: 3, 
    placeholder: jsResources.BusinessDirectory.SelectGroups+' '+ '('+jsResources.BusinessDirectory.Limit+' '+'3)', 
    allowClear: true 
});

这个逻辑会先遍历原始的<select>元素，把重复值的<option>删掉，然后再让Select2基于去重后的选项初始化，这样插件就能正常工作了。

内容的提问来源于stack exchange，提问作者kumar swamy