如何从选定的下拉列表中获取另一个值

How to get another value from the selected dropdownlist

我有项目的class

public class Project
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

然后,使用下拉列表显示

@Html.DropDownListFor(model => model.Id,
    new SelectList(Model.Projects, "Id", "Name", Model.Id),
    "-- Select --",
    new { @class = "form-control" })

如果我select一个项目,我可以得到Id和Name,但是如何得到描述?

<script>
    $(function () {
        $('#id').change(function () {
            alert('id = ' + $('#Id').val() + ', name = ' + $('#Id :selected').text() + ', description = ' + ???);
        });
    });
</script>

有两种方法

  1. 如果项目列表非常大,您将必须创建 API 并使用 ajax 获取描述。

  2. 在javascript中从模型中获取项目列表并找到描述

<script>

var projects = @Html.Raw(Json.Encode(Model.Projects));
console.log(JSON.stringify(projects)); //only for test
 
$(function () {

        $('#id').change(function () {
 
    let id= $('#Id').val();
    let description = null;
     let name = null;
   
projects.forEach((item) => {
    if (item.Id === id) {
      name= item.Name;
      description= item.Description;
     break;
    }
});
    alert('id = ' + id + ', name = ' + name + ', description = ' + description);
        });
        
  }         
</script>