Pull data from List that matches to the item picked from the dropdown (Javascript + asp.net)

I am working with asp.net razor pages. I am creating the List with the data from db. For example, this List contains such info as UserId, UserName, Education, and Location. On my page I would like to have a dropdown box that will show UserNames and when the user clicks on the value from dropdown, the matching Education and Location for this specific user will be shown in two according textboxes.

enter image description here

For now, I have the following code in my view, but it only allows me to see the picked value, but not the education and location values associated with this user:


<body>
    <div>
        Select User: @Html.DropDownListFor(m => m.UserId, new SelectList(Model.usersinfo, "UserId", "UserName"), "Select User")<br /><br />
        Selected Text: <label id="lbltxt"></label><br /><br />
        Selected Value: <label id="lblid"></label>
    </div>
    <script type="text/javascript">

        $(function () {
       //Dropdownlist Selectedchange event
        $('#UserId').change(function () {
        // Get Dropdownlist seleted item text
        $("#lbltxt").text($("#UserId option:selected").text());
        // Get Dropdownlist selected item value
        $("#lblid").text($("#UserId").val());

        })
        })
    </script>
</body>

Solution

This is my workaround:

Firstly, I have a UserModel which defined the properties you mentioned. Then here's my controller to prepare the data:

public IActionResult Privacy()
        {
            List<UserModel> list = new List<UserModel> { 
                new UserModel{ UserId = 1, UserName="user1", Education="primary", Location="steet1"},
                new UserModel{ UserId = 2, UserName="user2", Education="middle", Location="steet2"}
            };
            ViewData["dropdown"] = list;
            return View();
        }

Then this is the cshtml file:

@model WebAppMvcJwt.Models.UserModel

<div>
    <select asp-for="@Model.UserId" asp-items="(@ViewData["dropdown"] as IEnumerable<SelectListItem>)" id="UserId" class="form-control ">
        <span asp-validation-for="@Model.UserId"></span>
        @foreach (var item in @ViewData["dropdown"] as IEnumerable<UserModel>)
        {
            <option value="@item.UserId&&@item.Education&&@item.Location">@item.UserName</option>

        }
    </select>
    <input id="education" type="text" />
    <input id="location" type="text" />
</div>

@section Scripts{
    <script>
        $("#UserId").change(function () {
            var selectedid = $("#UserId option:selected").val().split("&&");
            var education = selectedid[1];
            var location = selectedid[2];
            $('#education').val(education);
            $('#location').val(location);
        });
    </script>
}