показать текст после выбора опции из выпадающих списков

Question

В настоящее время у меня есть 2 зависимых выпадающих списка. Пользователь должен иметь возможность выбрать параметр из первого раскрывающегося списка, а затем, в зависимости от первого варианта, должен иметь возможность выбрать параметр также из второго раскрывающегося списка. Затем на основе обоих вариантов я хочу отобразить текст. В настоящее время мне удается отобразить текст в раскрывающемся списке, чтобы подтвердить, что он работает. Я не могу понять, как превратить раскрывающийся список в текстовую область и отобразить текст, следуя тому, что я сделал. Кто-нибудь может мне помочь?

Ниже мой код:

CasIndex.cs html

@model my_app.Models.CascadingClass


@{
    ViewBag.Title = "CasIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Cas Index</h2>

@if (ViewBag.DogBPartsList != null)
{
    @Html.DropDownListFor(m => m.Bid, ViewBag.DogBPartsList as SelectList, " -- Select Body Part --", new { @class = "form-control" })
}

@Html.DropDownListFor(m => m.Sid, new SelectList(""), " -- Select Symptom --", new { @class = "form-control" })


@Html.DropDownListFor(m => m.Tid, new SelectList(""), " -- Treatment --", new { @class = "form-control" })

<script src="~/bower_components/jquery/dist/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        $("#Bid").change(function () {
            var bodypartId = $(this).val();
            debugger
            $.ajax({
                type: "post",
                url: "/Cas/GetDogSymptomsList?Bid=" + bodypartId,
                contentType: "html",
                success: function (response) {
                    debugger
                    $("#Sid").empty();
                    $("#Sid").append(response);
                }

            })
        })
    })

    $(document).ready(function () {
        $("#Sid").change(function () {
            var symptomId = $(this).val();
            debugger
            $.ajax({
                type: "post",
                url: "/Cas/GetDogTreatment?Sid=" + symptomId,
                contentType: "html",
                success: function (response) {
                    debugger
                    $("#Tid").empty();
                    $("#Tid").append(response);
                }

            })
        })
    })  
</script>

Контроллер:

// GET: Cas
        [HttpGet]
        public ActionResult CasIndex()
        {
            ViewBag.DogBPartsList = new SelectList(GetDogBodyPorts(), "Bid", "Bname");
            return View();
        }



        public List<DogBodyParts> GetDogBodyPorts()
        {
            List<DogBodyParts> dogbodyparts = dbContext.DogBodyParts.ToList();
            return dogbodyparts;
        }

        public ActionResult GetDogSymptomsList(int Bid)
        {
            List<DogSymptoms> selectList = dbContext.DogSymptoms.Where(x => x.Bid == Bid).ToList();
            ViewBag.Slist = new SelectList(selectList, "Sid", "Sname");
            return PartialView("DisplaySymptoms");

        }

        public ActionResult GetDogTreatment(int Sid)
        {
            List<DogTreatments> selectList = dbContext.DogTreatments.Where(x => x.Sid == Sid).ToList();
            ViewBag.TList = new SelectList(selectList, "Tid", "Tname");
            return PartialView("DisplayTreatments");

        }
    }

И один моих частичных представлений (все частичные представления имеют одинаковую структуру):

@model my_app.Models.DogTreatments


@if (ViewBag.TList != null)
{
    foreach (var item in ViewBag.TList)
    {
        <option value="@item.Value">@item.Text</option>
    }


}

Спасибо