ASP.NET MVC C#：如何为DropDownList绑定额外字段并通过JS获取

别急，这个问题其实很好解决，核心思路是把你需要的Text字段通过HTML5的data-*属性附加到下拉选项中，这样前台JavaScript就能轻松读取到。下面是具体的实现步骤：

1. 修改后台代码，构造带自定义属性的下拉选项集合 #

原来你用SelectList只能绑定Id和Name两个字段，现在我们需要手动生成SelectListItem集合，给每个选项添加存储Text字段的自定义属性：

// 假设你的实体集合是DruhyOdznaku，每个实体包含Id、Name、Text三个属性
ViewBag.DruhyOdznakuItems = db.DruhyOdznaku.Select(item => new SelectListItem
{
    Value = item.Id.ToString(), // 绑定Id作为选项的value
    Text = item.Name, // 绑定Name作为选项显示的文本
    // 添加data-text属性，存储数据库中的Text字段值
    Attributes = new Dictionary<string, string>
    {
        { "data-text", item.Text }
    }
}).ToList();

2. 更新前台的DropDownList代码 #

把原来的SelectList替换成我们刚才构造的SelectListItem集合：

@Html.DropDownList("id", (List<SelectListItem>)ViewBag.DruhyOdznakuItems, 
    new { @onchange = "functionChange()", @class = "form-control", id = "ddlViewBy" })

生成后的HTML选项会变成类似这样（可以通过浏览器开发者工具查看）：

<option value="1" data-text="你的数据库Text字段值1">显示的Name1</option>
<option value="2" data-text="你的数据库Text字段值2">显示的Name2</option>

3. 修改JavaScript代码获取Text字段值 #

现在只需要从选中的option元素的data-text属性中读取值即可：

function functionChange() {
    var dropdown = document.getElementById("ddlViewBy");
    var selectedOption = dropdown.options[dropdown.selectedIndex];
    // 获取数据库中的Text字段值
    var targetText = selectedOption.getAttribute('data-text');
    // 这里可以使用targetText做后续操作，比如打印到控制台
    console.log("选中项的Text字段值：", targetText);
}

这样就能完美实现你的需求：下拉框显示Name，同时能获取到数据库中的Text字段值啦。

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