如何在Razor MVC中用JavaScript移除DropDownListFor的指定选项

场景说明 #

你现在有这段CSHTML生成的国籍选择下拉框，因为架构限制没法改上游数据逻辑，只能在前端用JS删掉某个特定选项：

<div class="fieldC" id="Cityzens1" style="">
    <div class="label">@Html.LabelFor(model => model.Cityzenss1Cod, "Nationality 1")</div>
    <div class="field">
        @Html.DropDownListFor(model => model.Cityzens1Cod, (SelectList)ViewBag.Cityzens)
    </div>
</div>

具体实现 #

下面是几种直接在CSHTML里加JS的方法，注意要等DOM加载完再执行，不然找不到元素：

1. 按选项的value值删除

比如要删掉value为"US"的选项（换成你要移除的实际值）：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    // 拿到下拉框元素，DropDownListFor生成的id就是模型属性名Cityzens1Cod
    const selectBox = document.getElementById('Cityzens1Cod');
    if (selectBox) {
        // 找到目标选项并移除
        const targetOpt = selectBox.querySelector('option[value="US"]');
        if (targetOpt) {
            targetOpt.remove();
        }
    }
});

2. 按选项的显示文本删除

如果不知道value，只知道要删的文本是"美国"：

document.addEventListener('DOMContentLoaded', function() {
    const selectBox = document.getElementById('Cityzens1Cod');
    if (selectBox) {
        // 遍历所有选项找匹配的文本
        Array.from(selectBox.options).forEach(opt => {
            if (opt.textContent.trim() === "美国") {
                opt.remove();
            }
        });
    }
});

3. 嵌入到CSHTML的脚本块里

如果你的布局页有@section Scripts，直接把脚本丢这里就行，不会乱加载：

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const select = document.getElementById('Cityzens1Cod');
            if (!select) return;
            
            // 替换成你要移除的value
            const removeTargetValue = "要删的value值";
            const optToRemove = select.querySelector(`option[value="${removeTargetValue}"]`);
            if (optToRemove) optToRemove.remove();
        });
    </script>
}

小提示 #

• 要是你的项目用了jQuery，也可以写得更短：$('#Cityzens1Cod option[value="US"]').remove();，但原生JS不依赖库，兼容性更好
• 确认下拉框的id是不是Cityzens1Cod，如果DropDownListFor加了自定义id，要对应改获取元素的代码

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