Populating a dropdown based on selection in another dropdown

Question

on selection of Authority, district is binding but my issue is I want to fetch tehsil and on fetching tehsil, and according to authority and tehsil, villages shown

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Authority<sup style="color:#FF0000">*</sup></div>
          <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
                Html.DropDownListFor(x => x.SelectedDeptCode, Model.Departments, "----Select Authority-----", new { id = "deptcode", class = "form-control", onchange = "getdistrict()" })
                 Html.ValidationMessageFor(model => model.SelectedDeptCode, "", new { class = "text-danger" })
           <div style="color:#FF0000;font-size:12px;" id="deptcodeErr"></div>
</div>

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> District <sup style="color:#FF0000">*</sup></div>
   <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
           Html.TextBoxFor(model => model.districtname, htmlAttributes: new { id = "distcode", class = "form-control" })
            Html.ValidationMessageFor(model => model.districtname, "", new { class = "text-danger" })
    </div>
</div>
 <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Resources.internallanguage.taluk <sup style="color:#FF0000">*</sup></div>
<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
    Html.DropDownListFor(x => x.sitetaluk, Model.sitetaluknames, "----Select-----", htmlAttributes: new { id = "sitetalukcode", class = "form-control" @*@onchange = "onchangecommuneDL()"*@ })
    Html.ValidationMessageFor(model => model.sitetaluk, "", new { class = "text-danger" })
    <div style="color:#FF0000;font-size:12px;" id="sitetalukcodeErr"></div>
</div>

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Resources.internallanguage.village <sup style="color:#FF0000">*</sup> </div>
<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
    Html.DropDownListFor(x => x.sitevillage, Model.sitevillagenames, "----Select-----", htmlAttributes: new { id = "sitevillagecode", class = "form-control" })
    Html.ValidationMessageFor(model => model.sitevillage, "", new { class = "text-danger" })
    <div style="color:#FF0000;font-size:12px;" id="sitevillagecodeErr"></div>

</div>

As i getting district according to authority by onchange method i.e. onchange = "getdistrict()"

<script type="text/javascript">
    function getdistrict() {
       
        $Jbdtp('#deptcode').change(function () {
                var deptCode = $(this).val();
                if (deptCode) {
                    $Jbdtp.getJSON('@Url.Action("GetDistrictsByDept", "Application")', { deptCode: deptCode }, function (data) {
                        
                        $Jbdtp('#distcode').val(data);
                        
                    });
                }
            
        }
</script>

public JsonResult GetDistrictsByDept(int deptCode)
{
    var districts = GetDistricts(deptCode); 
    return Json(districts, JsonRequestBehavior.AllowGet);
}

public string GetDistricts(int deptCode)
{
    string disname = "";
    using (PPAEntities db = new PPAEntities())
    {
        disname = (from a in db.ppaofficialsdeptmasts
                where a.deptcode == deptCode
                   select a.distict).FirstOrDefault();
        var districtid = Convert.ToInt16(disname);

        disname = (from a in db.ppadistrictmasts
                where a.regioncode == districtid
                   select a.regiondesc).FirstOrDefault();
               .Select(x => x.distict).FirstOrDefault();
    }
    return disname;
}

Please Help and thanks in advance