How to assign a value to a select option (HTML element) and display data associated with that value? ASP.NET

Question

I have a select that is being 'populated' as follows in my ASP.NET application:

   <select id="id_select" class="form-control">
                        @foreach (var x in listay)
                        {
                          <option  value = "@x.nome"> @x.nome </option>
                        }
   </select>

This way, I’m able to display the names I have in "listay".

However, my application should display on the screen all data relating to the name that the user clicks on a select option. Like, for example: By clicking on an option - the name "John", for example - other data that is associated with João should be displayed just below on the screen, such as last name, age, date of birth, etc. I have all this data in my "listay" - and I can access it using "@x.last name", "@x.age", "@x.dataNascimento" - but I don’t know how to associate this data to the option that the user click on select.

Please, could someone guide me how to proceed to resolve this impasse? I thank you for your attention.

Answer 1

You can do this using Javascript to catch the moment the user changes the select. The name of this event is 'onchange'.

First of all it is important that in the value attribute of the option tag you put a unique key, which the user can be identified. The id is usually placed. So following your example, the first thing you should do is something like this:

<select id="id_select" class="form-control">
   @foreach (var x in listay)
   {
      <option value="@x.id"> @x.nome </option>
   }
</select>

This way, each option will have its own value and it will be easier for you to identify which data you should display according to the option selected by the user.

After that you can create the function that validates which user was selected and add the onchange directly in HTML:

<select id="id_select" class="form-control" onchange="BuscarDados(this);">
   //Options
</select>

Function in Javascript

function BuscarDados(elemento){
   
   let idSelecionado = elemento.children[elemento.selectedIndex];
   
   // Suponhamos que o id do João é igual a 3, logo... Você poderá exibir os dados do João dentro do if
   if(idSelecionado == 3){
      // Código para exibir os campos do João

   }

}