Cascading DropDownLists using AJAX and jQuery

I am trying to Cascade DropDownLists using AJAX and jQuery.

I am uncertain of the DropdownList1 jQuery SelectedIndexChanged    " $("#<%= DropDownList1.ClientID %> option:selected").trigger(function () { "

Here is my code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {$("#<%= DropDownList1.ClientID %> option:selected").trigger(function () {
                var ddl1SelectedValue = $("#<%= DropDownList1.ClientID %> option:selected").val();
                var data2 = { Value2: ddl1SelectedValue };
                var json2 = JSON.stringify(data2);$.ajax
                ({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: json2,
                    url: "Default.aspx/BindSubfolder2",
                    success: function (result2) {$.each(result2, function () {$("#<%=DropDownList2.ClientID %>").append($("<option></option>").val(this['RemoteURL']).html(this['RemoteNumber']));
                        });
                    },
                    error: function (status, ex) {
                        alert("Error Code: Status: " + status + " Ex: " + ex);
                    }
                });
            });
        });</script>