I have a dropdown and when that dropdown changes I want to display/render another dropdown. Can someone help me improve it?So, a person requests for getting referred in a company for a job. When that person selects a company name in the Referral Form I want to show only the cover letters for specific to that company.My JSON Action:public JsonResult ListOfCoverLetterByCompanyId(int companyId)        {            var coverletters = _context.CoverLetters                .Where(c => c.CompanyId == companyId)                .ToList();            var dropdown = new List<SelectListItem>();            foreach (var cl in coverletters)            {                dropdown.Add(new SelectListItem { Text = cl.CoverLetterName, Value = cl.CoverLetterId.ToString() });            }            return Json(dropdown, JsonRequestBehavior.AllowGet);        }My View File:@model Bridge.ViewModels.ReferralViewModel@using (Html.BeginForm()){    @Html.AntiForgeryToken()        <h4>Job Request</h4>        <hr />        @Html.ValidationSummary(true, , new { @class = text-danger })        <div class=form-group>            @Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = control-label col-md-2 })            <div class=col-md-10>                @Html.DropDownListFor(m => m.CompanyId, Model.Companies, new { @class = form-control js-change, onchange = companyChanged() })                @Html.ValidationMessageFor(model => model.CompanyId, , new { @class = text-danger })            </div>        </div>        <select id=ajaxdrop name=ajaxdrop></select>        <div class=form-group>            <div class=col-md-offset-2 col-md-10>                <input type=submit value=Create class=btn btn-default />            </div>        </div>    </div>}@section scripts{    <script>        function companyChanged() {            var companyId = $(.js-change).val();            $.ajax({                url: /Referral/ListOfCoverLetterByCompanyId,                data: {companyId : companyId},                contentType: application/json; charset-utf-8,                success: function (datas) {                    debugger;                    $.each(datas, function (i,data) {                        debugger;                        $(#ajaxdrop).append('<option value=' + data.Value + '>' + data.Text + '</option>');                    });                    alert(sucsess);                },                error: function () {                    alert(something wrong);                }            });        }    </script>}Model:public class ReferralViewModel    {        public int ReferralViewModelId { get; set; }        [Display(Name = Resume)]        public int ResumeId { get; set; }        public IEnumerable<Resume> Resumes { get; set; }        public int CoverLetterId { get; set; }    }
Correctly display a dropdown based on another dropdown change
c#;asp.net mvc;asp.net mvc 5;razor