ASP.NET MVC中如何确保下拉框仅显示唯一值？

我有一个包含大量值的下拉框，其中存在重复项：

对应的视图代码如下：

<label for="AAAPurposeType_AAAPurposeType" class="bl-label bl-text-align--left">
    <%=Html.Encode(Model.AAALoanType.DisplayName)%>
</label>
<div class="data width-70"><%=Html.EditorFor(m => m.AAALoanType)%></div>

请问如何实现仅显示唯一值？

解决方法 #

1. 后端处理（推荐方案）

从数据源层面去重是最可靠的方式，避免前端处理可能出现的延迟或残留问题。在ASP.NET MVC中，可以通过LINQ对下拉框的选项列表进行去重：

• 如果使用.NET 6及以上版本，可直接使用DistinctBy方法：

// 假设originalLoanTypes是原始的选项列表（比如List<SelectListItem>）
var uniqueLoanTypes = originalLoanTypes.DistinctBy(item => item.Value).ToList();
// 将去重后的列表赋值给模型对应的属性，再传递到视图

• 如果是.NET 5及以下版本，使用GroupBy配合Select实现：

var uniqueLoanTypes = originalLoanTypes
    .GroupBy(item => item.Value)
    .Select(group => group.First())
    .ToList();

2. 前端JavaScript处理

如果后端修改受限，可以在页面加载完成后用JS移除重复选项：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const selectElement = document.getElementById('AAAPurposeType_AAAPurposeType');
    const existingValues = new Set();
    const options = Array.from(selectElement.options);

    options.forEach(option => {
        if (existingValues.has(option.value)) {
            selectElement.removeChild(option);
        } else {
            existingValues.add(option.value);
        }
    });
});

内容的提问来源于stack exchange，提问作者Alex Gordon