show text after select an option from dropdown lists

Currently I have 2 dependent dropdownlists. The user should be able to select an option from the first drop down list, then depending on the first option, should be able to select an option also from the second drop down list. Then based on both option i want to display a text. Currently i manage to display the text in a dropdown list also just to confirm that it works. I cant figure out how i will turn the dropdownlistfor to a text area and display the text following what i have done. Can anyone help me?

Below is my code:

CasIndex.cshtml

@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>

Controller:

// 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");

        }
    }

And one of my partial views (all partial views have the same structure):

@model my_app.Models.DogTreatments


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


}

Thank you