jQuery of droplist not working in layout ASP.NET MVC 5

I added an external theme to my project, and I wrote a script to list data in dropdownlist that works on another page (unrelated to external theme), but doesn't work in the Layout theme page.

HomeController

Notice: City District and Neighborhood get partial view is working.

I didn't copy the code because it's too much.

public PartialViewResult PartialFilter()
{
    ViewBag.countrylist = new SelectList(CountryGet(), "CountryId", "CountryName");
    ViewBag.statuslist = new SelectList(statusGet(), "StatusId", "StatusName");
    return PartialView();
}

public List<Country> CountryGet()
{
    List<Country> countries = db.Countries.ToList();
    return countries;
}

public ActionResult CityGet(int CountryId)
{
    List<City> cities = db.Cities.Where(x => x.CountryId == CountryId).ToList();
    ViewBag.cityListesi = new SelectList(cities, "CityId", "CityName");
    return PartialView("CityPartial");
}

public ActionResult DistrictGet(int CityId)
{
    List<District> districtlist = db.Districts.Where(x => x.CityId == CityId).ToList();
    ViewBag.districtListesi = new SelectList(districtlist, "DistrictId", "DistrictName");
    return PartialView("DistrictPartial");
}

public ActionResult NgbhdGet(int districtid)
{
    List<Neighborhood> neighborhoodlist = db.Neighborhoods.Where(x => x.DistrictId == districtid).ToList();
    ViewBag.nghbdlistesi = new SelectList(neighborhoodlist, "NeighborhoodId", "NeighborhoodName");

    return PartialView("NgbhdPartial");
}

PartialFilter.cshtml

                <div class="col-12 col-lg-10">
                    <div class="row">

                        <div class="col-12 col-md-6 col-lg-3">
                            @if (ViewBag.countrylist != null)
                            {
                                @Html.DropDownListFor(m => m.CountryId, ViewBag.countrylist as SelectList, "Select Country", new { @class = "form-control" })

                            }
                        </div>


                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.CityId, new SelectList(""), "First Choice Country Name", new { @class = "form-control" })

                        </div>

                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.DistrictId, new SelectList(""), "First Choice City Name", new { @class = "form-control" })

                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.NeighborhoodId, new SelectList(""), "First Choice district Name", new { @class = "form-control" })

                        </div>

                    </div>
                </div>

The dropdown script in PartialFilter the scripts working very well in another layout page

                <script>
                    $(document).ready(function () {
                        $("#CountryId").change(function () {
                            var cid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/CityGet?CountryId=" + cid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#CityId").empty();
                                    $("#CityId").append(response);
                                }
                            })
                        })
                    })</script>
                <script>
                    $(document).ready(function () {
                        $("#CityId").change(function () {
                            var sid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/DistrictGet?CityId=" + sid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#DistrictId").empty();
                                    $("#DistrictId").append(response);
                                }
                            })
                        })
                    })</script>
                <script>
                    $(document).ready(function () {
                        $("#DistrictId").change(function () {
                            var districtid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/NgbhdGet?DistrictId=" + districtid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#NeighborhoodId").empty();
                                    $("#NeighborhoodId").append(response);
                                }
                            })
                        })
                    })</script>

The External Layout

                    <!DOCTYPE html>

                    <html lang="en">

                    <head>
                    <meta charset="UTF-8">

                    <meta name="description" content="">

                    <meta http-equiv="X-UA-Compatible" content="IE=edge">

                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Favicon -->
                    <link rel="icon" href="~/Content/img/core-img/favicon.png">



    <!-- Stylesheet -->
                    <link rel="stylesheet" href="~/Content/style.css">



                    <link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />



                    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />

                    <link href="~/Content/MyStyle.css" rel="stylesheet" />





</head>

                    <body>
  
    @Html.Action("PartialFilte" ,"Home")
    <!-- **** All JS Files ***** -->
    <!-- jQuery 2.2.4 -->
                    <script src="/Content/js/jquery.min.js"></script>
    <!-- Popper -->
                    <script src="/Content/js/popper.min.js"></script>
    <!-- Bootstrap -->
                    <script src="/Content/js/bootstrap.min.js"></script>
    <!-- All Plugins -->
                    <script src="/Content/js/bbunbles.bundle.js"></script>
    <!-- Active -->
                    <script src="/Content/js/default-assets/active.js"></script>





</body>

</html>
               

DevTools failed ....

I fixed it according to this:

[enter link description here][2]

enter link description here

but the data doesn't show