Ajax section are not working

Question

plz help

 

<script type="text/javascript">

$(document).ready(function() {

var ddlCountry = $('#ddlCountry');

var ddlport = $('#ddlport');

alert("demo");

$.ajax({

type: "POST",

url: "/webmethoddemo.aspx/GetCountry",

data: $(this).serialize(), //have also tried "{}" and other options such as removing the line

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(data) {

alert("success");

var result = jQuery.parseJSON(data.d)

ddlCountry.append($("<option></option>").val(0).html('--Select--'));

$.each(result, function(index, value) {

ddlCountry.append($("<option></option>").val(value.CountryName).html(value.VCOUNTRYCODE));

});

},

error: function(data) {

alert("error");

}

});

// to bind sate

$('#ddlCountry').change(function() {

var selectedValue = $('#ddlCountry option:selected').val();

if (selectedValue != "0") {

var VCODE = $(this).val();

$.ajax({

type: 'POST',

contentType: 'application/json',

data: "{VCOUNTRYCODE:'" + VCODE + "'}",

url: 'webmethoddemo.aspx/GetPort',

dataType: "json",

success: function(data) {

alert('success')

var result = jQuery.parseJSON(data.d)

ddlport.append($("<option></option>").val(0).html('--Select--'));

$.each(result, function(index, value) {

ddlport.append($("<option></option>").val(value.PortCode).html(value.PortName));

});

},

error: function(data) {

alert("error");

}

});

}

});

});

</script>