javascript - How to use JS to identify current value in <select> then search a Json for that key and return an associated value for that key in <div> in Razor view

Question

Apologies for the lengthy question. Here is more detail:

In my .Net Core Razor view:

1. I have Select drop down list:
   Text: Charity names (eg.' Organization for Breast cancer', 'Orphan Care', etc.)
   Value: The ids for these organizations
   All of this data comes from a db table named Organizations

2. Within this table there is also a column called Capacity

3. When I select a Charity from the dropdown, I would like the Capacity value to be printed to a <div> tag under the select dropdown list.

This is what I think should be done, but do not know how to do it, as my JS/ jQuery knowledge is lacking:

1. Convert IList of the Organizations table to JSON

2. Use Javascript to identify the current selected value in dropdown list

3. Using Javascript, search for this key in the JSON then return the value for Capacity

4. Return the value for Capacity in a <div> tag

Here is what the select dropdown list in the razor view, this fetches the key for the Organization. I want to use this key to find another column in the table and present in below in the result div

<label>Organization</label>
  <select asp-for="Organization" asp-items=@ViewBag.ListofOrganizations class="form-control" id="SelectedOrg"></select>
  <div id="result"></div>

Thank you in advance for any help.

Answer 1

One approach to solving this would be to store the Capacity value in a data attribute on the option element so that it can be read on the client side. This would be generated along with the HTML so the extra JS object generation and lookup wouldn't be necessary.

The only changes you'd need to make is to add the Capacity field to the model in the ListOfOrganisations and then generate the select HTML manually, instead of using asp-items. It would look something like this:

public class OrganisationItem {
  public string Text { get; set; }
  public string Value { get; set; }
  public string Capacity { get; set; }
}

<label>Organization</label>
<div>  
  <select name="Organization" class="form-control" id="SelectedOrg">
    @foreach(var item in ViewBag.ListofOrganizations) {
      <option value="@item.Value" data-capacity="@item.Capacity">@item.Text</option>
    }
  </select>
  <div id="result"></div>
</div>

$('#SelectedOrg').on('change', e => {
  let capacity = $(el.target).children('option:selected').data('capacity');
  $('#result').text(capacity);
});