MVC值更改中的级联下拉列表

Question

我有三个关系下拉列表，例如，如果我选择程序下拉列表，则它应该填充年份，而当我选择年份时，它应该填充块，我为此编写了javascript，但是工作正常，但是存在页面上的问题加载未触发的事件，我需要选择下拉列表的值，然后将其更改为第二次在第三个下拉菜单上触发事件，当我更改了第一个下拉列表的下拉菜单时，其值没有得到刷新，有人可以建议我如何解决这两个问题问题 以下是我的代码

        $("#ddlProgram").change(function () {
            $("#ddlYear").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("getCity")',

                dataType: 'json',

                data: { id: $("#ddlProgram").val() },


                success: function (states) {


                    $.each(states, function (i, state) {
                        $("#ddlYear").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');

                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve Year information.' + ex);
                }
            });
            return false;
        })
    });

</script>
<script type="text/javascript">


    $(document).ready(function () {

        $("#ddlYear").change(function () {
            $("#ddlBlock").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("getBlocks")',

                dataType: 'json',

                data: {
                    id: $("#ddlYear").val(),
                    programid: $("#ddlProgram").val()

                },


                success: function (states) {


                    $.each(states, function (i, state) {
                        $("#ddlBlock").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');

                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve  information.' + ex);
                }
            });
            return false;
        })
    });

</script>```