如何在@Html.ListBoxFor加载页面时设置初始选中项？

方法一：后端通过Model绑定实现（推荐） #

MVC的ListBoxFor控件是通过绑定的Model值确定选中项的，最可靠的方式是在Controller中设置Model的Item属性为目标选项的Value值：

1. 在Controller中处理数据源与选中逻辑：

// 假设食材列表数据源包含Id（选项Value）和Name（选项Text）字段
var ingredsList = db.Ingreds.ToList();
// 构造SelectList传入ViewBag
ViewBag.Ingreds = new SelectList(ingredsList, "Id", "Name");

// 获取目标ingred对象
var ingred = ViewBag.Ingred as testbox.Models.IngredModelAdmin;
// 找到Text与ingred.Item匹配的选项
var selectedItem = ingredsList.FirstOrDefault(x => x.Name == ingred.Item);
if (selectedItem != null)
{
    // 将Model的Item属性设置为该选项的Value（根据Model.Item的类型调整格式）
    model.Item = selectedItem.Id.ToString();
}

2. 前端保留原有ListBoxFor代码即可，控件会自动根据绑定的Model值选中对应选项。

方法二：前端JavaScript实现文本匹配选中 #

如果无法修改后端逻辑，可在页面加载后通过JS遍历选项匹配文本并设置选中：

@Html.ListBoxFor(model => model.Item, ViewBag.Ingreds as SelectList,                                   
new { @id = "item", @size = 5 })

<script>
window.onload = function() {
    // 转义特殊字符，避免脚本报错
    var targetText = @Html.Raw(Json.Encode(@ingred.Item));
    var selectEl = document.getElementById('item');
    
    // 遍历选项匹配文本，设置选中状态
    for (var i = 0; i < selectEl.options.length; i++) {
        if (selectEl.options[i].text === targetText) {
            selectEl.options[i].selected = true;
            break;
        }
    }
};
</script>

注意事项 #

• 优先使用方法一，符合MVC强类型绑定设计，避免前端脚本的兼容性问题。
• 若ListBoxFor允许多选（Model.Item为数组类型），只需将Model.Item设置为包含目标Value的数组即可。

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