ASP.NET MVC中如何获取DropDownList选中项的Description字段值

默认的SelectList只会存储选项的value（对应Id）和显示文本（对应Name），不会自动携带Description字段，你可以用下面两种常用方案实现：

方案1：给下拉选项添加自定义属性存Description #

自己手动渲染下拉框，给每个<option>新增data-description自定义属性存储对应项目的描述：

<select id="Id" name="Id" class="form-control">
    <option value="">-- Select --</option>
    @foreach(var project in Model.Projects)
    {
        <option value="@project.Id" 
                data-description="@project.Description"
                @(Model.Id == project.Id ? "selected" : "")>
            @project.Name
        </option>
    }
</select>

之后JS里直接读取选中项的data-description属性即可，注意修正原代码选择器的大小写错误：

$(function () {
    $('#Id').change(function () {
        var selectedOption = $('#Id :selected');
        alert('id = ' + $('#Id').val() + ', name = ' + selectedOption.text() + ', description = ' + selectedOption.data('description'));
    });
});

方案2：前端预存全量项目数据匹配 #

如果不想修改原有下拉框的渲染逻辑，可以先把所有项目数据序列化到前端JS变量中，选中时根据Id匹配对应的Description：
首先在Razor页面中添加如下代码，把项目列表注入到JS全局变量：

<script>
    // 如果项目用Newtonsoft.Json可替换为@Html.Raw(JsonConvert.SerializeObject(Model.Projects))
    var allProjects = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.Projects));
</script>

之后修改你的JS逻辑：

$(function () {
    $('#Id').change(function () {
        var selectedId = Number($('#Id').val());
        var description = '';
        if(selectedId){
            var matchProject = allProjects.find(p => p.Id === selectedId);
            description = matchProject ? matchProject.Description : '';
        }
        alert('id = ' + selectedId + ', name = ' + $('#Id :selected').text() + ', description = ' + description);
    });
});

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