change function is not working jquery

$( document ).ready(function() {
       $(function () {
           $.ajax({
               type: "POST",
               url: "Single_page.aspx/getCity",
               data: '{}',
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (r) {
                   var ddlCity = $("[id*=ddlCity]");
                   ddlCity.empty().append('<option selected="selected" value="0">Please Select City </option>');
                   $.each(r.d, function () {
                       ddlCity.append($("<option></option>").val(this['Value']).html(this['Text']));
                   });
               }
           });
       });

   });

        $('#<%=ddlCity.ClientID %>').change(function () {
           alert(cityID);
           var cityID = $("[id*=ddlCity] > option[@selected]").attr("value");
           alert(cityID);
           $("[id *= ddlLocality]").html("");
           $.ajax({
               type: "POST",
               url: "Single_page.aspx/getLocality",
               data: "{ID:'" + cityID + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (r) {
                   var ddlLocality = $("[id*=ddlLocality]");
                   ddlLocality.empty().append('<option selected="selected" value="0">Please Select City </option>');
                   $.each(r.d, function () {
                       ddlLocality.append($("<option></option>").val(this['Value']).html(this['Text']));
                   });
               }
           });
       });

<asp:DropDownList ID="ddlCity" runat="server"  class="form-control" >
                </asp:DropDownList>
                <asp:DropDownList ID="ddlLocality" runat="server" class="form-control">
                </asp:DropDownList>