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

Question

I have project's class

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

then, it's displayed using dropdownlist

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

If I select a project, I can get the Id and Name, but how to get the description?

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

Answer 1

There are two ways

1. If list of projects are very large you will have to create API and use ajax to get a description.

2. In javascript get list of project from model and find a description

<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>