ASP.NET Core中@Html.DropDownList如何禁用已选中选项

你可以根据你的业务场景选择后端预配置或者前端动态处理两种方案：

方案1：后端绑定阶段直接设置禁用（推荐） #

SelectListItem本身自带Disabled属性，你在后端组装ViewBag.ProductNames的时候直接给需要禁用的已选选项设置该属性即可，无需额外修改前端代码：

// 后端Action代码示例
List<SelectListItem> productItems = new List<SelectListItem>();
foreach (var product in yourProductList)
{
    productItems.Add(new SelectListItem
    {
        Text = product.Name,
        Value = product.Id.ToString(),
        Selected = product.Id == currentSelectedId, // 绑定当前选中值
        // 在此处添加判断逻辑，符合已选中/已占用条件的选项直接设为禁用
        Disabled = alreadySelectedProductIds.Contains(product.Id) 
    });
}
ViewBag.ProductNames = productItems;

渲染后对应<option>标签会自动带上disabled属性，浏览器原生就会禁止选中该选项。

方案2：前端JS动态控制禁用 #

如果你的禁用逻辑需要动态变化（比如动态表格行需禁用其他行已选产品、选中后即时禁用当前选项），可以通过JS实现：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
    const productSelect = document.getElementById('productnames');
    // 初始化：禁用当前已选中的选项
    const initSelected = productSelect.querySelector('option:checked');
    if (initSelected) initSelected.disabled = true;

    // 监听切换事件，更新禁用状态
    productSelect.addEventListener('change', function () {
        // 先重置所有选项的禁用状态
        this.querySelectorAll('option').forEach(option => option.disabled = false);
        // 禁用新选中的选项
        const currentSelected = this.querySelector('option:checked');
        if (currentSelected) currentSelected.disabled = true;
    });
});

如果是多行动态下拉框要全局禁用已选值，只需要在change事件中遍历所有行的下拉选中值，再统一给所有下拉框的选项设置禁用状态即可。

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