I m implementing Student Information System. In Student class (Id, Name, CurrentGradeId, CurrentClassroomId and other info). Want to implement cascading dropdown are grade and classroom.
Here Problem!
at modal popup bootstrap cascading dropdown has some misses. Cascading dropdown are working in content page, but I want to work with modal popup .

<div class="form-group">
                <label asp-for="CurrentGradeId" class="col-form-label">Grade Name</label>
                <select asp-for="CurrentGradeId" asp-items="@Model.SelectListGrades" class="form-control" id="GradeDropdown">
                    <option value="0" selected disable">Choose...</option>
                </select>
                <span asp-validation-for="CurrentGradeId" class="text-danger"></span>
</div>
<div class="form-group">
                <label asp-for="CurrentClassroomId" class="col-form-label">Classroom Name</label>
                <select asp-for="CurrentClassroomId" class="form-control" id="classroom-dropdown">
                    <option value="" selected disabled>Select Classroom</option>
                </select>
                <span asp-validation-for="CurrentClassroomId" class="text-danger"></span>
</div>

    @section Scripts {
    <script>
        $(document).ready(function () {
            $('#GradeDropdown').change(function () {
                var gradeId = $(this).val();
                if (gradeId) {
                    $.ajax({
                        url: '@Url.Action("GetClassroomByGrade", "Students")?gradeId=' + gradeId,
                        type: 'GET',
                        success: function (data) {
                            $('#classroom-dropdown').empty();
                            $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                            $.each(data, function (index, classroom) {
                                $('#classroom-dropdown').append('<option value="' + classroom.id + '">' + classroom.name + '</option>');
                            });
                        },
                        error: function () {
                            console.log("Error loading classrooms.");
                        }
                    });
                } else {
                    $('#classroom-dropdown').empty();
                    $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                }
            });
        });



    </script>
}

public async Task<IActionResult> GetClassroomByGrade(int gradeId)
{
    var classrooms = await _db.Classrooms.Where(c => c.GradeId == gradeId).ToListAsync();
    var result = classrooms.Select(c => new { id = c.Id, name = c.SectionInfo });
    return Json(result);
}