javascript - cascade dropdown in mvc value change

Question

I have three relational dropdown like if i select the program dropdown then it should populate the years and when i select the year it should populate blocks , i wrote the javascript for it it is working fine but there is an issue like on page load the events are not fired i need to select the dropdown list value and then change it to fire the event secondly on third dropdown its value did not get refreshed when i changed the dropdown of first dropdown list can someone suggest me how to fix these two issues below is my code

        $("#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>```

标签： javascriptasp.net-mvcdropdown