如何修改Html.DropdownListFor()的选中值或选中项？

核心问题排查 #

当前代码中category值正确但下拉框选中不生效，大概率是以下几个原因：

1. JS执行时机过早，DOM未加载完成 #

如果JS代码在<head>或者下拉框元素之前执行，此时categorieDropDown元素还未被浏览器解析，设置value自然无效。

修复代码：
将JS逻辑放到DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
    var category = @Html.Raw(Json.Serialize(Model.Anunt.Category));
    console.log(category);
    var dropdown = document.getElementById('categorieDropDown');
    dropdown.value = category;
});

如果项目使用jQuery，也可以用：

$(function() {
    var category = @Html.Raw(Json.Serialize(Model.Anunt.Category));
    $('#categorieDropDown').val(category);
});

2. 选项值与category不匹配 #

下拉框的选项value必须和category完全一致（包括大小写、空格、特殊字符）。例如category是"Laptop"，但选项value是"laptop"，设置会失效。

验证方法：打印所有选项值确认匹配度：

var dropdown = document.getElementById('categorieDropDown');
Array.from(dropdown.options).forEach(opt => console.log(`选项值：${opt.value}`));

如果存在大小写或格式差异，可统一格式后设置：

dropdown.value = category.trim().toLowerCase();

3. 选项的value与文本不一致（如用ID作为value） #

如果下拉框的选项value是ID（而非分类名称），但你手里的category是分类文本，需要遍历选项匹配文本后设置选中：

var dropdown = document.getElementById('categorieDropDown');
var category = @Html.Raw(Json.Serialize(Model.Anunt.Category));
for (let i = 0; i < dropdown.options.length; i++) {
    if (dropdown.options[i].text.trim() === category.trim()) {
        dropdown.selectedIndex = i;
        break;
    }
}

4. 后端直接绑定选中状态（最优方案） #

无需前端JS，后端生成下拉框时直接指定选中项，页面加载时自动生效：

// 假设categories是你的分类选项列表（List<string>或实体列表）
@Html.DropDownListFor(m => m.Anunt.Category, 
    new SelectList(categories, Model.Anunt.Category), 
    "Categorie", 
    new { @class = "form-control background", @Id = "categorieDropDown" })

这里SelectList的第二个参数就是要选中的选项值，渲染后下拉框会自动匹配选中。

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